Vue中非父子组件通信的方法小结

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

// ComponentA.vue
import { EventBus } from './eventBus.js';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('messageEvent', 'Hello from Component A');
    }
  }
};

// ComponentB.vue
import { EventBus } from './eventBus.js';

export default {
  created() {
    EventBus.$on('messageEvent', message => {
      console.log(message); // 输出: Hello from Component A
    });
  },
  beforeDestroy() {
    EventBus.$off('messageEvent'); // 清除监听器，避免内存泄漏
  }
};

npm install vuex --save

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

// main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';

new Vue({
  store,
  render: h => h(App)
}).$mount('#app');

// ComponentC.vue
export default {
  computed: {
    doubleCount() {
      return this.$store.getters.doubleCount;
    }
  },
  methods: {
    incrementCount() {
      this.$store.dispatch('increment');
    }
  }
};

<template>
  <div>
    <component-a ref="compA"/>
    <component-b ref="compB"/>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  components: {
    ComponentA,
    ComponentB
  },
  methods: {
    triggerMethodInCompB() {
      this.$refs.compB.doSomething();
    }
  }
};
</script>

<template>
  <div>
    <child-component>
      <template v-slot:output="{ value }">
        <span>{{ value }}</span>
      </template>
    </child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    sendValueToSlot(value) {
      this.$emit('value-for-slot', value);
    }
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <input type="text" @change="updateValue($event.target.value)">
    <slot :value="value"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: ''
    };
  },
  methods: {
    updateValue(val) {
      this.value = val;
      this.$emit('value-for-slot', val);
    }
  }
};
</script>