vue.js中如何界定子组件和父组件,以及子组件和父组件的数据

<div id="app">
   <my-component>{{message}}</my-component>
</div>

首先,我们创建一个新的vue实例

var app = new Vue({
    el:"#app",
    data:function(){
        return {
            message:""
        }
    }
})

然后,我们定义该实例的子组件

Vue.component("my-component",{
    templete:`
    <div>{{item}}</div>
    `,
    data:function(){
      return{
      item:""
      }
    }
})

(1)父组件:如下,我们创建的名为app的vue实例,整个是父组件; (2)关于子组件定义:注册的才是子组件; (3)父组件的数据:数据在什么模板里，就在什么作用域里编译,就属于哪个组件; 如下这段代码本身是父模板, 不存在子模板,父组件模板中的<my-component>是父组件的子元素,是子组件的标签(挂载点/占位符),注册的才是子组件。全局注册的子组件my-component在获得父元素的prop后就会初始化并替代父组件中的子元素。 所以,message在父组件模板中,就在父组件的作用域中编译,message是来自父组件的数据;

<div id="app">
   <my-component>{{message}}</my-component>
</div>

(4)子组件的数据: item是在子组件的模板里的， 所以在子组件的作用域里编译,是子组件的数据