Vue cli之传递数据

1、父组件的数据传递给子组件

 

 

 

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// 父组件 <Menu title="来自Home的数据" :clickNum="num"></Menu>   // 子组件 <li @click="clickNum++">{{clickNum}}</li>   props: {  // 接收来自父组件的数据     title: {       type: String,   // 必须写类型，如果有多个类型，则可以写成 type: [String,Object,Number,Boolean,]       default: "默认值",   // 默认值       required: false,    // 是否是必填传参     },     clickNum: {       type: Number,     }   },

　　

使用父组件传递数据给子组件时, 注意一下几点:

1. 传递数据是变量,则需要在属性左边添加冒号。传递数据是变量,这种数据称之为"动态数据传递"。传递数据不是变量,这种数据称之为"静态数据传递"

2. 父组件中修改了数据,在子组件中会被同步修改,但是,子组件中的数据修改了,是不会影响到父组件中的数据.这种情况,在开发时,也被称为"单向数据流"

 

 

2、子组件传递数据给父组件

在子组件中，通过this.$emit('自定义事件名', 参数1,参数2,...)来调用父组件中定义的事件

 

 

 

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

// 子组件 watch:{     clickNum(){       this.$emit("setNum",this.clickNum);     }   }, // 父组件 <Menu @setNum="setNum" title="来自Home的数据" :clickNum="num"></Menu> methods:{     setNum(num){       this.num = num;     }   },

　　

注意：子组件中往父组件传递数据，也是属于单向数据量。