vue 组件通信的解决方案

vue 组件通信的场景和方案

Vue组件间通信是Vue开发中的一个常见问题。以下是一些常见的场景和解决方案：

1. 父子组件通信：

• 父组件可以使用props向子组件传递数据。

• 子组件可以使用$emit方法触发事件，父组件可以监听这些事件。

// 父组件
<template>
  <ChildComponent :parentData="data" @childEvent="handleChildEvent" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      data: 'some data'
    };
  },
  methods: {
    handleChildEvent(payload) {
      // 处理子组件触发的事件
    }
  }
};
</script>
 
// 子组件
<template>
  <button @click="sendToParent">Send to Parent</button>
</template>
<script>
export default {
  props: ['parentData'],
  methods: {
    sendToParent() {
      this.$emit('childEvent', 'data from child');
    }
  }
};
</script>

1. 兄弟组件通信：

• 可以使用事件总线（Event Bus）或Vuex进行通信。

// Event Bus 示例
// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();
 
// 组件A
<template>
  <button @click="sendToB">Send to B</button>
</template>
<script>
import { EventBus } from './event-bus.js';
 
export default {
  methods: {
    sendToB() {
      EventBus.$emit('dataForB', 'data from A');
    }
  }
};
</script>
 
// 组件B
<template>
  <div>{{ dataFromA }}</div>
</template>
<script>
import { EventBus } from './event-bus.js';
 
export default {
  data() {
    return {
      dataFromA: ''
    };
  },
  created() {
    EventBus.$on('dataForB', (data) => {
      this.dataFromA = data;
    });
  },
  beforeDestroy() {
    EventBus.$off('dataForB');
  }
};
</script>

 

1. 跨多层级的组件通信：

• 可以使用Vuex管理状态，通过状态管理进行跨组件通信。

 

// Vuex store 示例
import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
 
export default new Vuex.Store({
  state: {
    globalData: ''
  },
  mutations: {
    setGlobalData(state, data) {
      state.globalData = data;
    }
  },
  actions: {
    updateGlobalData({ commit }, data) {
      commit('setGlobalData', data);
    }
  }
});
 
// 组件
this.$store.dispatch('updateGlobalData', 'new data');
 
// 另一个组件
computed: {
  globalData() {
    return this.$store.state.globalData;
  }
}

1. 非父子组件通信：

• 可以使用provide/inject或事件总线进行通信。

 

// 使用provide/inject进行非父子组件通信的例子
 
// 组件A
<template>
  <div>
    <ChildComponent />
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      parentMessage: 'Hello from parent',
      parentMethod: this.parentMethod
    };
  },
  methods: {
    parentMethod() {
      console.log('Called from child');
    }
  }
};
</script>
 
// 组件B
<template>
  <div>
    {{ parentMessage }}
    <button @click="parentMethod">Call parent method</button>
  </div>
</template>
 
<script>
export default {
  inject: ['parentMessage', 'parentMethod']
};
</script>