body>
<div id="box">
<Son></Son>
<Father></Father>
</div>
</body>
/*
刚刚我用的组件跟组件和全局组件
好了,现在我用一下,局部组件
这里得用到 components这个属性
*/
//首先我创建两个组件。
var Father= {
data : function(){
return{
msg : '我是老子,我有老子的数据'
}
},
template: `<div>我是老子组件————————————》老子的数据{{msg}}</div>`
}
var Son ={
data : function(){
return{
msg : '我是儿子,我是儿子,我是儿子'
}
},
template: `<div>生怕别人不知道你是儿子一样————————————》儿子的数据{{msg}}</div>`
}
// 这两个组件很简单 现在两个组件创建好了。那么我肯定想用他。比如说让他显示在 <body></body> 里面
/*
//一样的,如果 直接在body里面这样用
<body id="box" >
<Son></Son>
<Father></Father>
</body>
// 以上这样是不行的,因为我们还需要一个根实例。至于为啥要根实例,这里我也还没有理解,它规定的是这样的吧。
*/
var rootVue= new Vue ({
el : '#box' , // 如果要把infor 显示在
data: {
infor : '我是根哈哈哈哈'
},
components: {
Father,
Son
}
})
//所以我们就创建一个根实例、
//如下
//是不是发现和全局组件有什么不同
//局部组件和全局组件的区别在于。局部组件需要注册才能使用,如何注册呢?用components属性
//组件的使用就到这里,都很简单,很基础。现在我们再来说说子父组件