H5W3
当前位置:H5W3 > 问答 > 正文

父组件如何分辨子组件中通过同一个事件通知的不同变量?

在网上找了一个地址选择的组件,功能是选择国家省份城市,简略代码如下。我的问题是,这里在选择了国家、省份、城市时,都是使用 addressSelect 事件向父进程通信,那父进程怎么知道当前事件返回的数据是国家还是省份或者城市呢?我应该怎么使用这个组件:

  1. 父组件通过 v-model 绑定 countryCodeprovinceCodecityCode 多个变量?不过我没找到怎么通过 v-model 通过绑定多个变量的方法
  2. 把事件变成 3 个,比如 selectCountryselectProvinceselectCity,便于父进程区分事件类型

谢谢!

<template>
<div id="AddressSelect">
<el-row>
<el-col span="6">
<el-select
v-model="countryCode"
@change="changeCountry"
:placeholder="$t('国家')"
>
<el-option (省略)></el-option>
</el-select>
</el-col>
<!-- 后面是省份、城市选择,代码省略 -->
</el-row>
</div>
</template>
<script>
export default {
model: {
event: 'addressSelect',
},
data() {
return {
countryCode: '', // 国家编码
provinceCode: '', // 省份编码
cityCode: '', // 城市编码
// 省略
};
},
methods: {
changeCountry(val) {
// 省略部分代码
this.$emit('addressSelect', val);
},
changeProvince(val) {
this.$emit('addressSelect', val);
},
changeCity(val) {
this.$emit('addressSelect', val);
},
}
}
</script>

回答

你是选中事件回调返回的对象中,只有区域代码吗?

返回对象一定是可配置的,加个层级字段就好了

子组件

this.$emit('addressSelect','province', val);

父组件接收的时候加一个参数不就好了

子组件通信的时候添加一个标识:
this.$emit('addressSelect', val, 'country')
父组件接收:

<child @addressSelect="addressSelect(arguments)" />
addressSelect(args) {
    console.log(args)
}

父组件通过args[0], args[1]拿到相应的参数

或者子组件传递一个对象,在对象中添加相应的标识:

this.$emit('addressSelect', {
    val,
    flag: 'country'
})

未经允许不得转载:H5W3 » 父组件如何分辨子组件中通过同一个事件通知的不同变量?

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址