组件之爸爸给儿子糖吃

最新推荐文章于 2022-06-12 02:07:17 发布

千锤百炼的坏孩子

最新推荐文章于 2022-06-12 02:07:17 发布

阅读量178

点赞数 1

分类专栏： Vue的困惑

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

版权

Vue的困惑专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

/*  
    再来看看父给子传值

    这里得学一个新的属性 props
*/
    //首先我创建两个组件，和一个根组件，
    //然后我想在父组件里面用子组件
    //难道我这样用？
/*     <div  id="box">
          <Father>
              <Son></Son>
          </Father>
        </div>
        这样是不对的哦， 因为我们还在一个同纬度的世界，还是一个平面的、
        我们想到， 组件里面是有   template: `<div> 父组件</div>`这样的模板的，
        
        这样的包含在里面了，所以这样才是 子父组件哦。
         template: `<div> 我是老子组件 <Son></Son> </div>`

     */


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

    var Father= {
      data : function(){
        return{
          msg : '老子的数据：我是老子，我有老子的数据',
          sugar : '老子的糖'
        }
      },
      template: `<div>
                    我是老子组件———》老子的数据{{msg}}
                    <hr>
                    下面是儿子组件:
                    <Son :candy="sugar"></Son>
                  </div>`,
          components: {
                    Son
          } 
  }
 

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


    //这里值得注意的是， 我在Son组件里面  props:['candy'],
    // 我们的知道 指令(v-bind,简写就是  : )  
  
    //指令candy用于绑定dom的属性
    // 所以， 我能够在 <Son :candy ></Son> 这样用他。  
    // 指令再绑定一个数据，就可以在子组件里面拿到了。   

    //还有一个值得注意的是， 我们需要在components 里面注册一个Son这样才能使用哦

看看效果图：