vue实现父组件调用子组件 Cascader 级联选择器

父组件：

定义。把父子组件关联起来，在父组件里通过对 AreaCascader 添加 ref="areaCascader"，然后用 $refs.areaCascader.方法名，可以直接调用子组件中该方法；并通过v-bind（即简写 " ："），将父组件中的regionCode值传递给子组件

<AreaCascader ref="areaCascader" :area-id.sync="searchParams.regionCode" />

引入子组件

import AreaCascader from '@/components/AreaCascader'
components: {  AreaCascader },

子组件：

当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择

<el-cascader
v-model="selectedAreaIds"
:options="areaTreeData"
:props="{ value: 'id', label: 'name' }"
:change-on-select="true"
:clearable="true"
/>

触发子菜单的方式：

只需为 Cascader 的 options属性指定选项数组即可渲染出一个级联选择器。通过 expand-trigger可以定义展开子级菜单的触发方式。添加 @change事件，参数为 Cascader 的绑定值：一个由各级菜单的值所组成的数组。通过 clearable 设置输入框可清空。选择即改变，若需要允许用户选择任意一级选项，则可将change-on-select赋值为true 。

子组件通过props属性，在子组件中接收父组件传过来的值。在调用的地方通过 areaId.sync 将选择后的 areaId 绑定到父组件上。

props: {
areaId: {
type: String,
default: '',
},
},

修改父组件的值（不是真的修改,而是通过this.$emit提交一个事件，将子组件的行为告诉父组件）。val 是由选择的各个层级的 id 组成的数组

watch: {
selectedAreaIds(val) {
this.$emit('update:areaId', val[val.length - 1] || '')
},
},

methods: {
getSearchTree() {
api.getAreaTree().then(res => {
const { code, data } = res
if (Number(code) === 0) {
this.areaTreeData = formatData(res.data || [], 'id', 'pId')
}
})
},
reset() {
this.selectedAreaIds = []
},
},

最后

以上就是欣慰书本为你收集整理的vue实现父组件调用子组件 Cascader 级联选择器的全部内容，希望文章能够帮你解决vue实现父组件调用子组件 Cascader 级联选择器所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。