vue组件间传值

Posted 2021-03-01 xjy20170907

父组件向子组件传递数据

// 父组件传递
<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);