vue3对v-model的语法进行了改动。
vue2 中有两种方式实现数据的双向绑定(组件与外部数据的双向绑定),一种是使用v-model,另一种是使用v-bind.sync修饰符。
vue2中的v-model,主要是进行value属性的绑定和input事件的派发。
<ChildComponent v-model="pageTitle" />
// 等价于
<ChildComponent :value="pageTitle" @input="pageTitle = $event" />
//子组件
this.$emit('update:title', newValue)
//父组件
<ChildComponent :title.sync="pageTitle" />
//等价于
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
Vue3.x自定义组件实现v-model
1.子组件的props和事件,需要和v-model冒号后的绑定值相对应,例如若绑定值为v-model:text
,则子组件中
props应为:props:[text]
,事件应为: update:text
2.vue3.x,删除了vue2.x中的model选项,并可以设置多个v-model
//父组件
<template>
<div>
<!-- v-model后不写值,默认就是modelValue -->
<Child
v-model="message1"
v-model:text="message2"
/>
<div>绑定的值1:{{message1}}</div>
<div>绑定的值2:{{message2}}</div>
</div>
</template>
//子组件
<template>
<div>
<!-- 3.x默认值改为了update:modelValue-->
<input
type="text"
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
>
<input
type="text"
:value="text"
@input="$emit('update:text', $event.target.value)"
>
</div>
</template>
<script>
export default {
// 3.x默认值改为了modelValue
props:['modelValue','text']
}
</script>
vue3可以自定义 v-model 修饰符
在 Vue2 中的 v-model 上,我们用过 .trim、.lazy 和 .number这三个内置修饰符,而 Vue3 则在这个基础上增加了自定义修饰符。
<ChildComponent v-model.capitalize="name"></ChildComponent>
<!-- ChildComponent 组件 -->
<template>
<div>
<input type="text" :value="modelValue" @input="emitValue" />
</div>
</template>
<script>
export default {
props: {
modelValue: String,
modelModifiers: { // 自定义修饰符会默认传入这个 prop 中
type: Object,
default: () => ({}),
},
},
mounted() {
// 当组件 v-model 后面加上了自定义修饰符,组件内部会在 modelModifiers 上获取到修饰符状态
console.log(this.modelModifiers);
},
methods: {
emitValue(e) {
let value = e.target.value;
// 如果使用了自定义修饰符,即状态为 true,就处理值
if (this.modelModifiers.capitalize) {
value = value.charAt(0).toUpperCase() + value.slice(1);
}
// emit value
this.$emit("update:modelValue", value);
},
},
};
</script>
如果是 v-model 带上了参数,同时使用了自定义修饰符,如下所示:
<ChildComponent v-model:name.capitalize="nameValue"></ChildComponent >
<!-- ChildComponent 组件 -->
<template>
<div>
<input type="text" :value="name" @input="emitValue" />
</div>
</template>
<script>
export default {
props: {
name: String, // modelValue -> name
nameModifiers: { // modelModifiers -> nameModifiers
type: Object,
default: () => ({}),
},
},
mounted() {
console.log(this.nameModifiers);
},
methods: {
emitValue(e) {
let value = e.target.value;
// 如果使用了自定义修饰符,就处理值
if (this.nameModifiers.capitalize) {
value = value.charAt(0).toUpperCase() + value.slice(1);
}
// emit value
this.$emit("update:name", value);
},
},
};
</script>
标签:绑定,自定义,修饰符,value,Vue2,Vue3,组件,model
From: https://blog.csdn.net/junsens/article/details/137169016