筛选联动组件

269 阅读1分钟

父组件:

1.引入组件

import classification from '../modules/classification.vue'

2.在components中注册组件

components: {
    classification,
},

3.使用组件

<classification @setClassification="setClassification" :options='options'></classification>

给子组件传值,有几层筛选,使用属性传值

options: [
        { children: [], data: {}, title: '领域' },
        { children: [], data: {}, title: '子领域' },
],

父组件方法

setClassification (e) {
      this.classList = e
      this.searchAjax()
},

子组件

点单选,触发方法classification(index),index:点的是第几层

classification (index) {
      //将选中的值联动到下一层筛选上
      if(index < this.options.length-1){
          this.options[index+1].children = this.options[index].data.children
      }
      this.ids = []
      this.options.forEach((e) => {
        if (e.data.value != undefined) {
          this.ids.push(e.data.value)
        } else {
          this.ids.push('')
        }
      })
      this.goParent(this.ids)
},

调用父组件方法,把选中的ids传给父组件

goParent (e) {
      this.$emit('setClassification', e)
},

筛选联动.png done