Vue.js基础教程之父子组件

原标题:Vue.js基础教程之父子组件
Vue.js基础教程
父子组件
组件意味着协同工作 , 通常父子组件会是这样的关系:组件A在它的模版中使用了组件B 。

Vue.js基础教程之父子组件
文章图片

Vue.js基础教程之父子组件
文章图片

Vue.js基础教程之父子组件
文章图片
Vue.js基础教程之父子组件
Vue.js基础教程之父子组件
文章图片
在父子组件组合使用中要注意以下一些问题:
没有实例化的子组件不能拿出来单独使用!<divid="app">
<parent-component></parent-component>
<child-component></child-component>
</div>
在父标签内部嵌套子标签!<divid="app">
<parent-component>
<child-component></child-component>
</parent-component>
</div>
因为在父标签一旦生成真实的DOM , 其内部的子标签就会被解析成为普通的HTML标签来执行 , 而且<child-component>不是标准的HTML标签 , 会被浏览器过滤掉 。