vue3.x移除了vue2.x的model选项,自定义组件双向绑定不在使用以下方法:
// vue2的v-model双向绑定方法
model: {
prop: 'value', //3.x默认值改为了modelValue
event: 'input' //3.x默认值改为了update:modelValue
},
//使用 this.$emit('input', index);
vue3.x采用以下方式(v-model默认对应的prop值是modelValue):
父组件:
<inpageMenus
v-model="menu"
/>
子组件:
<script>
export default {
name: 'MenusComponent',
props: {
modelValue: {
type: Number,
default: 0,
},
},
methods: {
clickMenu(index) {
this.$emit('update:modelValue', index);
},
},
};
</script>
vue3.x可以绑定多个v-model:
父组件:
<inpageMenus
v-model="menu"
v-model:text="text"
/>
子组件:
<script>
export default {
name: 'MenusComponent',
props: {
modelValue: {
type: Number,
default: 0,
},
text: {
type: String,
default: '0',
},
},
methods: {
clickMenu(index) {
this.$emit('update:modelValue', index);
},
textChange(str) {
this.$emit('update:text', str);
},
},
};
</script>
vue3.x去掉了v-model的.sync
修饰符,其他的比如.trim
依然可以使用,新增自定义修饰符
父组件
<test
v-model.toLowerCase="color"
v-model:text.toUpperCase="textValue"/>
子组件
<template>
<div class='test'>
<input type="text" @input="inputf">
<input type="text" @input="input2f">
</div>
</template>
<script>
export default {
name: 'test',
props: {
modelValue: {
type: String,
default: 'eee',
},
modelModifiers: { // 获取modelValue修饰符
type: Object,
default: () => ({}),
},
text: {
type: String,
default: 'eee',
},
textModifiers: { // 获取text修饰符
type: Object,
default: () => ({}),
},
},
methods: {
inputf(e) {
let { value } = e.target;
if (this.modelModifiers.toLowerCase) {
value = value.toLowerCase();
}
this.$emit('update:modelValue', value);
},
input2f(e) {
let { value } = e.target;
if (this.textModifiers.toUpperCase) {
value = value.toUpperCase();
}
this.$emit('update:text', value);
},
},
};
</script>