父组件和子组件

    我们先来看以下的例子：
    我们有两个组件，一个是school，一个是student
    school组件嵌套student

    下面的例子有几个注意点：
    1.因为代码是从上往下执行，所以student 组件要在前面，school组件要在后面，因为school组件里面使用components引入了students

    2.容器中只能写，因为vm中只引入了school

    3.组件school中的template要引用

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>Document</title>
    7. </head>
    9. <body>
    10.     <div id="app">
    11.         <school></school>
    12.     </div>
    14.     <script type="text/javascript" src="./vue.js"></script>
    15.     <script type="text/javascript">
    16.         const student = {
    17.             template: `
    18.             <div>
    19.                {{ studentname }}
    20.             </div>
    21.             `,
    22.             data() {
    23.                 return {
    24.                     studentname: "代亮",
    25.                 }
    26.             },
    27.         }
    28.         const school = {
    29.             template: `
    30.             <div>
    31.                {{ schoolname }}
    32.                <student></student>
    33.             </div>
    34.             `,
    35.             data() {
    36.                 return {
    37.                     schoolname: "苑庄小学",
    38.                 }
    39.             },
    40.             components: {
    41.                 student
    42.             }
    43.         }
    45.         new Vue({
    46.             el: "#app",
    47.             components: {
    48.                 school
    49.             }
    50.         })
    51.     </script>
    52. </body>
    54. </html>

    然后我们使用Vue的插件看一下

    我们可以看到如下层级结构

    image.png

    一般开发经验，我们会创建一个app组件，vm只需要管理app组件，剩下的都去嵌套管理

    当然我们还可以通过在vm中写template，而不是在容器中

        <div id="app">
        <school></school>
    </div>
     ....
        new Vue({
            el: "#app",
            components: {
                school
            }
        })

    修改如下

        <div id="app">

    </div>

...
        new Vue({
                        template: `<school> </school>`
            el: "#app",
            components: {
                school
            }
        })