vue3 v-model父子组件双向绑定
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>vue3 v-model使用(多个 v-model 绑定)
//父组件
setup(props) {
const msg = ref("msg");
const foo = ref('123')
return{
foo,msg
}
}
<!--父组件--!>
{{modelValue}} {{msg}}
<HelloWorld v-model:foo="modelValue" v-model:message="msg"></HelloWorld>
<!--子组件--!>
<input type="text" :value="foo" @input="$emit('update:foo', $event.target.value)" />
<input type="text" :value="message" @input="$emit('update:message', $event.target.value)" />/>
自定义修饰符的用法，
根据官方
//父组件
<HelloWorld v-model.capitalize="myText"></HelloWorld>
{{myText}}
setup(){
return { myText : ref(22); } //不加ref无法做到响应
}
//子组件
//自定义修饰符 capitalize 通过modelModifiers prop 提供给组件 忽视any
<input type="text" :value="modelValue" @input="emitValue" />
props: {
modelValue: String,
modelModifiers: {
default: () => ({ capitalize: false })
}
},
created() {
console.log(this.modelModifiers); // { capitalize: true }
},
methods: {
emitValue(e: any) {
let value: any = e.target.value;
if (this.modelModifiers.capitalize) {
value = value.charAt(0).toUpperCase() + value.slice(1);
}
this.$emit("update:modelValue", value);
}
}
//对于带参数的 v-model 绑定
<vModel v-model:foo.capitalize="bar"></vModel>
props: {
foo: {
type: String
},
fooModifiers: {
type: String
}
}
created() {
console.log(this.fooModifiers); // { capitalize: true }
}
<input type="text" :value="foo" @input="$emit('update:foo', $event.target.value)" />
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
