Vue传值方式
1. provide和inject实现祖先与后代组件传值
/* 祖先组件 */
export default {
//...
methods: {
test(val) {
console.log("test: ", val);
}
},
provide() {
return {
test: this.test
}
}
}
/* 后代组件 */
export default {
//...
inject: ['test'],
created() {
this.test("aa");// test: aa
}
}
2. props实现父向子传值
/* 父组件 */
<Son :name="'zhnagsan'" :age="2" />
/* 子组件 */
export default {
props: {
name: String,
age: Number
}
}
3. $emit实现子组件传数据给父组件
子组件触发postMsg事件，进而触发父组件show函数，并通过show传递参数
/* 父组件 */
<Son @postMsg="show" />
/* 子组件 */
export default {
data(){
return {
msg:"子组件给父组件的数据"
}
},
created(){
this.$emit('postMsg',this.msg);
}
}
4. $emit和$on实现兄弟组件传值
/* 将中间者bus挂载到Vue原型 */
Vue.prototype.$bus = new Vue();
/* 输出端组件调用对应方法 */
addC() {
this.$bus.$emit('a-c', this.num);
}
/* 接收端设置监听 */
created() {
this.$bus.$on('a-c', num => {
this.num += num;
});
}
