vue 组件v-model的使用与踩坑
组件v-model的使用与踩坑
·
一、原理
在组件上使用v-model
,和在表单标签上使用相似,都是一种语法糖
。
相当于将绑定的值 modelValue
通过 props
传递给组件,组件中的值改变后,通过触发 update
事件更新 modelValue
,以达到数据的双向绑定。
二、实现
父组件:
<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>
子组件:
<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>
三、踩坑
按照网上的写法写完后发现输入框中既没有值,而且也无法输入。这说明值没有从父组件传到子组件,子组件也没有触发对应的事件。
通过查阅 vue的官方文档,找到如下说明:
文档说的是 v-model
的默认值是 value
的prop和 input
事件,而不是我写的 modelValue
和 update
事件。而且还提供了 model
选项来给我们改写默认值。
- 修改默认值(方法1)
export default {
props: {
modelValue: String,
},
emits: ["update:modelValue"],
// 在子组件中添加 model 选项
model: {
prop: 'modelValue', // 绑定的 prop 名
event: 'update:modelValue' // 通知父组件更新的事件名
},
};
- 修改prop与事件名(方法2)
export default {
props: {
// 改变prop
value: String,
},
emits: ["input"],
data() {
return {};
},
computed: {
inputValue: {
set(newValue) {
// 改变事件名
this.$emit("input", newValue);
},
get() {
return this.value;
},
},
},
};
更多推荐
已为社区贡献1条内容
所有评论(0)