对于子父组件的初步理解

最新推荐文章于 2023-12-01 20:32:51 发布

千锤百炼的坏孩子

最新推荐文章于 2023-12-01 20:32:51 发布

阅读量304

点赞数 2

分类专栏： Vue的困惑

本文链接：https://blog.csdn.net/qq_36829724/article/details/78823015

版权

Vue的困惑专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<body>
    <div  id="box">
        <Son></Son>
        <Father></Father>

    </div>
</body>

/*  
      子父组件。什么叫子父组件。
      我的理解就是，如果你在一个组件A里面，用到了另外一个组件B。
      那么B就是A的子组件，A就是B的父组件

*/
    //来看栗子

    //首先我创建两个组件，和一个根组件，
    //然后我想在父组件里面用子组件
 /*   
  //难道我这样用？
     <div  id="box">
          <Father>
              <Son></Son>
          </Father>
     </div>

        这样是不对的哦， 因为我们还在一个同纬度的世界，还是一个平面的。
        我们想到， 组件里面是有   template: `<div> 父组件</div>`这样的模板的，
        
        这样的包含在里面了，所以这样才是 子父组件哦。
         template: `<div> 我是老子组件 <Son></Son> </div>`

     */



    var Father= {
      data : function(){
        return{
          msg : '我是老子，我有老子的数据'
        }
      },
        template: `<div>我是老子组件————————————》老子的数据{{msg}}
                          <Son></Son>
                    </div>`
    }  

    var Son ={
      data : function(){
        return{
          msg : '我是儿子，我是儿子，我是儿子'
        }
      },
        template: `<div>生怕别人不知道你是儿子一样————————————》儿子的数据{{msg}}</div>`
    }  

       new Vue ({
            el : '#box' ,  
            components: {
              Father,
              Son
            }
     })

来个效果

：