vue父子组件

父子组件
- 组件意味着协同工作，通常父子组件会是这样的关系：组件 A 在它的模版中使用了组件 B 。
- 最简单的父子组件

<body>
    <div id="app">
        <parent-template></parent-template>
        <parent-template2></parent-template2>

        <my-child></my-child>
    </div>
</body>

<script src="js/vue.js"></script>
<script>

    //1.子组件构造器
    var Child = Vue.extend({
        template:'![](images/pic1.jpeg)'
    });

    //2.父组件构造器
    var Parent = Vue.extend({
        //注册子组件
       components:{
           'child-template':Child
       },
        template:'<div><child-template></child-template><p>照片很模糊</p></div>'
    });

    var Parent2 = Vue.extend({
        components:{
            'child-template':Child
        },
        template:'<div><p>下面的照片很清晰!</p><child-template></child-template></div>'
    });

    //3.创建组件
    Vue.component('parent-template', Parent);
    Vue.component('parent-template2', Parent2);

    //注册组件
    Vue.component('my-child', Child);
    Vue.component('parent-component', Child);

    //4.vue实例
    new Vue({
        el:'#app'
    });

</script>

在父子组件组合使用中要注意以下一些问题：

> 没有实例化的子组件不能拿出来单独使用！

```
<div id="app">
   <parent-component></parent-component>
   <child-component></child-component>
</div>
```

> 在父标签内部嵌套子标签

<div id="app">
    <parent-component>
        <child-component></child-component>
    </parent-component>
 </div>

因为在父标签一旦生成真实的DOM，其内部的子标签就会被解析成为普通的HTML标签来执行，而且<child-component>不是标准的HTML标签，会被浏览器过滤掉。

1-12 vue父子组件

1-12 vue父子组件

vue父子组件

推荐阅读更多精彩内容