vue插件实现联动

Vue 插件实现联动的方法

使用全局事件总线

在 Vue 中可以通过创建一个全局事件总线来实现组件间的联动。首先创建一个新的 Vue 实例作为事件总线。

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

在需要联动的组件中引入事件总线，通过 $on 监听事件，通过 $emit 触发事件。

// ComponentA.vue
import { EventBus } from './event-bus.js';

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

// ComponentB.vue
import { EventBus } from './event-bus.js';

export default {
  created() {
    EventBus.$on('message', (message) => {
      console.log(message); // 输出: Hello from Component A
    });
  }
};

使用 Vuex 状态管理

对于复杂的联动需求，Vuex 是一个更好的选择。首先安装并配置 Vuex。

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    sharedData: null
  },
  mutations: {
    updateData(state, payload) {
      state.sharedData = payload;
    }
  },
  actions: {
    updateData({ commit }, payload) {
      commit('updateData', payload);
    }
  }
});

在组件中通过 mapActions 和 mapState 来访问和修改共享状态。

// ComponentA.vue
import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions(['updateData']),
    sendData() {
      this.updateData('Data from Component A');
    }
  }
};

// ComponentB.vue
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['sharedData'])
  },
  watch: {
    sharedData(newVal) {
      console.log(newVal); // 输出: Data from Component A
    }
  }
};

使用自定义插件

可以创建一个自定义插件来封装联动逻辑，方便复用。以下是一个简单的插件示例。

// linkage-plugin.js
export default {
  install(Vue) {
    Vue.prototype.$linkage = {
      sharedState: {},
      setState(key, value) {
        this.sharedState[key] = value;
        Vue.prototype.$emit('linkage-update', { key, value });
      },
      getState(key) {
        return this.sharedState[key];
      }
    };
  }
};

在 main.js 中安装插件。

// main.js
import Vue from 'vue';
import LinkagePlugin from './linkage-plugin.js';

Vue.use(LinkagePlugin);

在组件中使用插件提供的功能。

// ComponentA.vue
export default {
  methods: {
    updateData() {
      this.$linkage.setState('message', 'Hello from Plugin');
    }
  }
};

// ComponentB.vue
export default {
  created() {
    this.$on('linkage-update', ({ key, value }) => {
      if (key === 'message') {
        console.log(value); // 输出: Hello from Plugin
      }
    });
  }
};

使用 provide/inject

对于父子组件或深层嵌套组件的联动，可以使用 provide 和 inject。

// ParentComponent.vue
export default {
  provide() {
    return {
      sharedData: 'Data from Parent'
    };
  }
};

// ChildComponent.vue
export default {
  inject: ['sharedData'],
  mounted() {
    console.log(this.sharedData); // 输出: Data from Parent
  }
};

通过以上方法，可以根据具体需求选择合适的方式实现 Vue 组件间的联动。