vue实现列表联动插件

Vue 列表联动插件实现方案

基于 v-model 的双向绑定

通过 Vue 的 v-model 实现父子组件数据同步，适用于简单联动场景。

<template>
  <div>
    <parent-list v-model="selectedItems" :items="parentItems" />
    <child-list :items="filteredChildItems" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItems: [],
      parentItems: [...],
      allChildItems: [...]
    }
  },
  computed: {
    filteredChildItems() {
      return this.allChildItems.filter(item => 
        this.selectedItems.includes(item.parentId)
      )
    }
  }
}
</script>

使用事件总线通信

通过 Vue 的 EventBus 实现跨组件通信，适合复杂层级结构。

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

// ParentComponent.vue
EventBus.$emit('parent-selected', selectedIds)

// ChildComponent.vue
EventBus.$on('parent-selected', ids => {
  this.filteredItems = this.allItems.filter(item => ids.includes(item.parentId))
})

封装可复用插件

创建独立插件实现标准化列表联动功能。

// list-linkage.js
const ListLinkage = {
  install(Vue) {
    Vue.mixin({
      methods: {
        $updateLinkedList(sourceKey, targetKey, filterFn) {
          this.$watch(sourceKey, newVal => {
            this[targetKey] = this.allItems.filter(item => filterFn(item, newVal))
          }, { deep: true })
        }
      }
    })
  }
}

// main.js
import ListLinkage from './list-linkage'
Vue.use(ListLinkage)

// 组件内使用
this.$updateLinkedList('selectedParents', 'filteredChildren', (child, parents) => {
  return parents.some(p => p.id === child.parentId)
})

基于 Provide/Inject 的层级传递

适合深层嵌套组件结构，通过依赖注入实现数据共享。

// 祖先组件
export default {
  provide() {
    return {
      listLinkage: {
        selected: Vue.observable([]),
        update: this.updateSelection
      }
    }
  }
}

// 后代组件
export default {
  inject: ['listLinkage'],
  methods: {
    handleSelect(item) {
      this.listLinkage.update(item.id)
    }
  }
}

性能优化建议

对于大数据量场景应添加防抖处理和虚拟滚动。

import debounce from 'lodash/debounce'

export default {
  methods: {
    updateFilter: debounce(function(searchTerm) {
      this.filtered = this.items.filter(i => 
        i.name.includes(searchTerm)
      )
    }, 300)
  }
}

完整插件示例

以下是封装成 npm 包的完整插件结构示例：

// index.js
export default {
  install(Vue, options = {}) {
    const defaultOptions = {
      debounceTime: 200,
      linkageKey: 'linkageId'
    }

    const config = { ...defaultOptions, ...options }

    Vue.directive('list-linkage', {
      bind(el, binding, vnode) {
        const source = binding.value.source
        const target = binding.value.target
        const filterFn = binding.value.filter || defaultFilter

        vnode.context.$watch(
          source, 
          debounce(newVal => {
            vnode.context[target] = vnode.context.allItems
              .filter(item => filterFn(item, newVal))
          }, config.debounceTime),
          { deep: true }
        )
      }
    })

    function defaultFilter(item, sourceVal) {
      return sourceVal.includes(item[config.linkageKey])
    }
  }
}

使用时可全局注册或按需引入，通过指令方式实现列表联动：

<template>
  <div v-list-linkage="{ source: 'selected', target: 'filtered' }">
    <!-- 联动列表内容 -->
  </div>
</template>