组件之爸爸给儿子糖吃

来源：互联网发布：windows sdk自定义消息编辑：程序博客网时间：2024/04/30 10:42

<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这样才能使用哦

看看效果图：

阅读全文

0 0