1.父组件
引入子组件时,绑定一个自定义事件:@事件名="事件触发需要调用的方法"
事件名格式:短折号“-”隔开
<RegionSelector @region-select="getRegion" />
// 接收地区组件的数据
function getRegion(region:any) {
if (region.length === 2) {
// 直辖市没有少了城市这一层
ruleForm.provinceId = region[0]
ruleForm.areaId = region[1]
} else {
ruleForm.provinceId = region[0]
ruleForm.cityId = region[1]
ruleForm.areaId = region[2]
}
console.log(region)
}
2.子组件,需要声明父组件传递的自定义事件
const emit = defineEmits(['region-select'])
在子组件,选择场景触发自定义事件,可以是点击更新等场景
再使用声明的事件,emit(事件名,数据)
<el-cascader v-model="region" :options="options" @change="emit('region-select',region)" />
以上就可以实现数据通过子传父的方式