<body>
<div
id
=
"app"
>
<!-- 组件中的数据(data,props,computed)只能在组件自己的模板中使用 -->
<!-- <com>{{child}}</com> -->
<input
type
=
"text"
v-model
=
"str"
>
<com>
{{str}}
</com>
</div>
</body>
<script
src
=
"vue.js"
></script>
<script
type
=
"text/html"
id
=
"com"
>
<div>
<h1>
<slot></slot>
</h1>
</div>
</script>
<script>
Vue
.
component
(
"com"
,{
template:
"#com"
,
data
(){
return
{
child:
"这是子组件中的数据"
}
}
});
new
Vue
({
el:
"#app"
,
data:
{
str:
"这是根组件的数据"
}
});
<
/script>
