Component 父子组件关系

Posted 2020-09-21 千と千寻の

我们把组件编写的代码放到构造器外部或者说单独文件
我们需要先声明一个对象,对象里就是组件的内容。

var zdy = {
   template:`<div>Panda from China!</div>`
}

声明好对象后在构造器里引用就可以了。

components:{
    " zdy ": zdy
}

html中引用

<zdy></zdy>

父子组件的嵌套

html

<div id="app">
         <register></register>   
     </div>

js

 // 子组件 要在父组件前面
        var city = {
            template:`<div>{{message}}</div>`,
            data:function(){
                return{
                  message:"这是子组件"
                } 
            }
        }
        // 父组件
        var parent = {
             template:`<div><city></city>{{message}}</div>`,
              data:function(){
                return{
                  message:"这是父组件"
                } 
            },
            components:{
                "city":city
            }

        }
               var vm = new Vue({
                 el:"#app",
                 data:{

                 },
                 //最后在这注册register组件
                 components:{
                    "register":parent
                 }
               })