1. Princípio
O uso de componentes on v-modelé semelhante ao uso de tags de formulário, ambos são um 语法糖.
É equivalente a passar o valor vinculado ao componente modelValuepor meio de props, e depois que o valor no componente é alterado, updateele é atualizado acionando um evento modelValuepara obter a associação bidirecional de dados.
Dois, perceba
componente pai:
<template>
<div>
<children v-model="msg"></children>
<!-- 等效于下方写法 -->
<children :modelValue="msg" @update:modelValue="msg = $event"></children>
</div>
</template>
<script>
export default {
data() {
return {
msg: 123,
};
},
};
</script>
Submontagem:
<template>
<div>
<el-input v-model="inputValue"></el-input>
</div>
</template>
<script>
export default {
props: {
// 接收父组件传来的值
modelValue: String,
},
emits: ["update:modelValue"],
data() {
return {
};
},
computed: {
inputValue: {
set(newValue) {
// 发送事件改变父组件的值
this.$emit("update:modelValue", newValue);
},
get() {
return this.modelValue;
},
},
},
};
</script>
Três, pise no poço
Depois de escrever de acordo com o método de escrita na Internet, descobri que não há valor na caixa de entrada e não pode ser inserido. Isso significa que o valor não é passado do componente pai para o componente filho e o componente filho não aciona o evento correspondente.
Consultando a documentação oficial do vue , encontrei as seguintes instruções:
O que os documentos dizem é que v-modelo valor padrão é valueprop e event, não o e event inputque escrevi . E também fornece uma opção para substituir o valor padrão para nós.modelValueupdatemodel
- Modifique o valor padrão (método 1)
export default {
props: {
modelValue: String,
},
emits: ["update:modelValue"],
// 在子组件中添加 model 选项
model: {
prop: 'modelValue', // 绑定的 prop 名
event: 'update:modelValue' // 通知父组件更新的事件名
},
};
- Modifique prop e nome do evento (método 2)
export default {
props: {
// 改变prop
value: String,
},
emits: ["input"],
data() {
return {
};
},
computed: {
inputValue: {
set(newValue) {
// 改变事件名
this.$emit("input", newValue);
},
get() {
return this.value;
},
},
},
};