组件之爸爸只单传儿子数据

来源：互联网发布：windows sdk自定义消息编辑：程序博客网时间：2024/05/06 12:24

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

/*        文档上面说过，props是单向数据流。看一下很好理解。      下来来试一下特殊的, 数组和对象      这里值得注意的是，            1.数组和对象的改变是可以改变父组件的数据滴            2. 当然如果数组和对象的改变都只是换引用，那将毫无意义（注意我注释掉的代码即可）            */   /*          */     var Son ={      props:{         candy: {              type : String          },          car : {              type : Object          },          fruit : {              type : Array          },            },       template: `<div>                        <hr>                      拿到爸爸的糖糖:————{{candy}}                        <br/>                      拿到爸爸的车车---- {{car}}                        <br/>                      拿到爸爸的水果----{{fruit}}                      <hr/>                      <input type="button" value="改变糖糖" @click="channgeCandy">                      <input type="button" value="改变车车" @click="channgeCar" >                      <input type="button" value="改变水果" @click="channgeFruit">                  </div>`,      methods: {              channgeCandy : function(){                      this.candy="我要变成儿子的糖糖";                      alert              },              channgeCar : function(){                  /*     this.car= {                            name : '我是换了以后的car啊哈哈哈哈哈哈'                      } */                      this.car.name="我要变成儿子的车车";                      this.car.wheel="轮子我也要改一波。。。。。"                      console.log(this.car)              },              channgeFruit : function(){                     // this.fruit= [ '儿子的苹果' ,'儿子的梨' ,'儿子的西瓜', '儿子的李'];                      this.fruit.splice(0,1,'儿子的苹果');                      this.fruit.splice(1,1,'儿子的梨');               },      }        }    var Father= {      data : function(){        return{          msg : '老子的数据：我是老子，我有老子的数据',          sugar : '老子的糖',          truck :  {                  name : '我是老子的卡车',                  wheel : '我是卡车，车轮滚滚',                  engine  : '我是引擎！！！'          },          fruit : [ '老子的苹果' ,'老子的梨' ,'老子的西瓜', '老子的李']        }      },      template: `<div>                    我是老子组件———》老子的数据{{msg}}--- <br/>    显示一下老子的数据<br/>                    ----{{sugar}}                    <br/>                    ----{{truck}}                    <br/>                    ----{{fruit}}                    <hr>                    下面是儿子组件:                    <Son :candy="sugar" :car="truck" :fruit="fruit" ></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