vue 组件通信

vue组件通信方式

1、vuex 通过vuex内的state对象定义共享属性，通过mutations/actions/getters对象内定义方法来修改state对象内的属性，需要使用共享属性的组件通过import {mapstate/mapmutations/getters/mapactions} 然后在页面中使用/调用，看详情

2、父子组件之间：

　　父组件 => 子组件 ：在父组件中import子组件，component对象中加入子组件名称，在template中加上子组件标签，在子组件标签上绑定需要传输的属性，在子组件中通过props，就可以使用了。父组件调用子组件方法

　　子组件 => 父组件：在子组件中通过this.$emit('parentObserve',params)广播自定义事件parentObserve，父组件中在组件标签上监听该事件，进行事件处理。this.$parent.event/props 调用父组件方法或者属性

 

3、兄弟组件：

　　a、新建一个js文件eventBus,js，事件车相当于一个中间件引入vue，new vue（）并开放出来

import Vue from 'vue'

export default new Vue

 

　　b、在需要通信的兄弟组件之间引入eventBus.js,

　　　兄弟组件a.vue

import eventBus from '../eventBus.js'
export default {
    data () {
        return {
        }
    },
    created () {
    },
    methods: {
        showChange (params) {
        　　eventBus.$emit('searchData', params) //通过eventBus.$emit对外广播searchData事件，其他组件可以在created中通过eventBus.$on进行事件监听
　　　　}
    }
}

　　c、兄弟组件b：注意：当卸载组件前要通过beforeDestroy将当前监听的事件删除掉，通过eventVue.$off(name）删除，因为就算组件被卸载但是监听事件不会被删除，而再次进入页面时又会添加新的事件监听，导致有多个事件监听，所以会多次触发事件程序。

import eventBus from '../eventBus.js'
export default {

    data () {
        return {
        }
    },
    created () {
        eventBus.$on('searchData', (params) => {//通过eventBus.$on监听searchData,并进行事件处理
　　　　　　　console.log('监听到a组件的searchData事件，并处理事件程序')
        })
    },
    methods: {

    }
}