14、Vue组件嵌套

---

前言

1、Vue组件嵌套

所谓组件嵌套 就是在子组件的父级模板中 用标签的形式调用子组件。嵌套规则，子组件要在父组件上注册，父组件要到Vue实例上去注册。
当我们没进行嵌套的时候：

<div id="app">
        <my-child></my-child>
        <my-parent></my-parent>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
        var child = {
            template:`
                <div>
                    <h4>这是child组件</h4>
                </div>
                `
        }
        var parent = {
            template:`
                <div style="border:1px solid red">
                    <h4>这是parent组件</h4>
                </div>
                `
        }
        new Vue({
            el:"#app",
            components:{
                "my-child":child,
                "my-parent":parent
            }
        })
    </script>

进行嵌套操作后：

<div id="app">
        <my-parent></my-parent>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
        var child = {
            template:`
                <div>
                    <h4>这是child组件</h4>
                </div>
                `
        }
        var parent = {
            template:`
                <div style="border:1px solid red">
                    <h4>这是parent组件</h4>
                    <my-child></my-child>
                </div>
                `,
            components:{
                "my-child":child
            }
        }
        new Vue({
            el:"#app",
            components:{
                "my-parent":parent
            }
        })
    </script>

这里需要知道的几点内容有：
①、我们知道在创建组件的时候，除了没有el之外，像data，methods，components等是可以存在的，因此在嵌套的时候我们是将子组件放入父组件的components上。
②、在上面的例子中，我们要知道想要子组件的父组件中显示出来，那么需要在父组件的components中添加上子组件的注册标签名即：<my-child></my-child>。
③、在#app中写成<my-parent><my-child></my-child></my-parent>是无效的，因为<my-child>是注册在父组件上的，应该直接写 <my-child></my-child>即可。
④：也是最重要的一点，那就是每个template中只能有一个根元素，所以我们的template中不能写成如下格式：

<template id="father">
            <h1>我是父组件中的template</h1>
            <son1></son1>
    </template>

这是会报错的，因为此时template中存在两个根元素，正确的写法应该是：

<template id="father">
        <div>
            <h1>我是父组件中的template</h1>
            <son1></son1>
        </div>

这样我们template的根元素就变成了div了，因此就不会报错。