image.png
vue3.x移除了vue2.x的model選項(xiàng)奄妨，自定義組件雙向綁定不在使用以下方法：
model: {
prop: 'value', //3.x默認(rèn)值改為了modelValue
event: 'input' //3.x默認(rèn)值改為了update:modelValue
},
//使用 this.$emit('input', index);
vue3.x采用以下方式（v-model默認(rèn)對(duì)應(yīng)的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可以綁定多個(gè)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>
