项目场景:
在vue3
版本3.4
以下,无法使用defineModel()
直接双向绑定。而要使用如下方式:
一个名为 modelValue 的 prop,本地 ref 的值与其同步;
一个名为 update:modelValue 的事件,当本地 ref 的值发生变更时触发
问题描述
如果按下面代码编写
父组件代码如下:
<companySelect :company="formModel.filterType" />
子组件代码:
<template>
<a-select
:v-model="company"
:options="options"
placeholder="请输入"
:filter-option="false"
:field-names="fieldNames"
:loading="companyLoading"
:show-extra-options="false"
:allow-clear="true"
allow-search
@search="handleSearch"
@change="$emit('update:company', $event)"
/>
</template>
结果发现子组件emit无法update父组件的值
原因分析:
不太清楚。但有解决方案。
解决方案:
仅需要将父组件v-model写全就可以了。
<companySelect v-model:company="formModel.filterType" />