Component 父子组件关系（16）

一、构造器外部写局部注册组件

先声明一个对象,对象里就是组件的内容。比如Componentpanda对象，里面就是panda的组件内容。声明好对象后在构造器里引用就可以了

<div id="app">
    <panda></panda>
</div>
<script>
    var Componentpanda={
        template:`<div style="color: red">
                            <p>panda from china</p>
                       </div>`,
         };
    var app=new Vue({
        el:"#app",
        components:{
            'panda':Componentpanda
        },
    });

二、父子组件的嵌套

在父组件panda内使用子组件city,先注册city,再在父组件Componentpanda对象内引用

<div id="app">
    <panda></panda>
</div>
  var city={
        template:`<div style="color: green">sichuan of china</div>`
    }
   var Componentpanda={
        template:`<div style="color: red">
        <p>panda from china</p>
        <city></city>
        </div>`,
        components:{
            'city':city
        }
    };
    var app=new Vue({
        el:"#app",
        components:{
            'panda':Componentpanda
        },
    });

注意：在父组件引用子组件前，必须要先注册，不然会报错。

image.png
image.png