24. Vue 的 父组件和子组件
原创
©著作权归作者所有:来自51CTO博客作者咸咸瑜瑜的原创作品,请联系作者获取转载授权,否则将追究法律责任
父组件和子组件
在前面我们看到了组件树:
1.组件和组件之间存在层级关系
2.而其中一种非常重要的关系就是父子组件的关系
直接上代码 然后分析:
<div id="app">
<p-a></p-a>
</div>
<script src="js/vue.js"></script>
<script>
//创建一个组件【这里充当子组件】
const child = Vue.extend({
template:`
<div>
我是child的组件
</div>
`
})
//创建一个组件【这里充当父组件】
const parent = Vue.extend({
template:`
<div>
我是parent的组件
<p-b></p-b>
</div>
`,
components:{
'p-b':child //这里相当于绑定了局部组件
}
})
//其实可以吧 //其实可以吧 app 看做一个 root【根组件】
const app = new Vue({
el:"#app",
components:{
'p-a':parent
}
})
</script>
因为当子组件注册到父组件的components时,Vue会编 译好父组件的模块 所以呢 创建组件时候 内个位置要严格,一值没效果就是位置导致
<p-b></p-b> 只能在 父组件中使用(识别) 相当于绑定了这个局部组件
还有就是 绑定局部组件是用 components s 别少了!!!!
这就是 子组件 和 父组件 。其实还有更简洁的方法...
作者:咸瑜