vue插件实现联动
Vue 插件实现联动的方法
在 Vue 中实现组件联动通常涉及父子组件通信、事件总线或状态管理。以下是几种常见方法：
父子组件通信（Props & Events）
通过 props 向下传递数据，通过 $emit 向上触发事件实现联动：
// 父组件
<template>
<ChildComponent :value="parentValue" @update="handleUpdate" />
</template>
<script>
export default {
data() {
return { parentValue: '' }
},
methods: {
handleUpdate(val) {
this.parentValue = val
}
}
}
</script>
// 子组件
<script>
export default {
props: ['value'],
methods: {
changeValue() {
this.$emit('update', newValue)
}
}
}
</script>事件总线（Event Bus）
创建中央事件总线实现非父子组件通信：
// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()
// 组件A
EventBus.$emit('event-name', data)
// 组件B
EventBus.$on('event-name', data => { /* 处理逻辑 */ })Vuex 状态管理
通过集中式状态管理实现跨组件联动：
// store.js
export default new Vuex.Store({
state: { sharedValue: '' },
mutations: {
updateValue(state, payload) {
state.sharedValue = payload
}
}
})
// 组件A
this.$store.commit('updateValue', newValue)
// 组件B
computed: {
sharedValue() {
return this.$store.state.sharedValue
}
}自定义指令联动
创建自定义指令实现 DOM 元素间的联动：
Vue.directive('sync-height', {
bind(el, binding) {
const target = document.querySelector(binding.value)
el.style.height = `${target.offsetHeight}px`
}
})
// 使用
<div v-sync-height="'.target-element'"></div>provide/inject 跨级通信
祖先组件通过 provide 提供数据，后代组件通过 inject 接收：
// 祖先组件
export default {
provide() {
return { theme: this.themeData }
}
}
// 后代组件
export default {
inject: ['theme']
}选择方法时应考虑：
- 简单父子关系优先使用 props/events
- 跨层级组件考虑 provide/inject
- 复杂应用建议使用 Vuex
- 临时通信可使用事件总线
每种方案都有适用场景，根据具体需求选择最合适的联动方式。
