父组件:
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)
},
done