vue3自定义组件之v-model实现父子组件双向绑定
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)" />
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
赞 (0)