vue组件间传值

父组件向子组件传递数据

// 父组件传递
<dialogAttendee :dialogcascaderVisible="dialogcascaderVisible"></dialogAttendee>

// 子组件接接收
props:{
    dialogcascaderVisible: {
        type: Boolean,
        default: false
    },
    reservation: Array,
}

父组件改变子组件中的数据

// 父组件中引用子组件
<son ref="son"></son>

// 父组件的点击事件
clickFunc(){
    // 更新子组件里a的值
    this.$refs.son.a = ‘xx‘;
    // 调用子组件里b方法
    this.$refs.son.b();
}

子组件调用父组件方法并向父组件传值

// 子组件触发事件
this.$emit(‘emitEvent‘, ‘123‘);

// 父组件
// 引用子组件并绑定方法
<part-template @emitEvent = "ievent"></i-template>
// 设置方法
methods:{
    ievent(data){
        console.log(‘allData:‘, data);
    }
}

兄弟组件间传值

1 vuex

2 eventBus

// eventBus.js文件
import Vue from ‘vue‘;
export default new Vue(); 

// 使用的组件首先引用这个文件
import Bus from ‘../../assets/js/eventBus‘

// 引用之后绑定函数，或触发已绑定的函数
// 绑定事件
Bus.$on(‘setData‘, param => {
    this.initShare(shareInfo,this);
});
// 触发时间
Bus.$emit(‘setData‘, 1); 

原文地址：https://www.cnblogs.com/xjy20170907/p/12672379.html