Vue3中父子组件数据通信v-model多个值的使用及modelModifiers用法

作者：温新

时间：2021-08-08

hi，我是温新，一名PHPer

一个组件中只能使用一个v-model，但要传递多个值时该怎么办？

上篇文章中记录到，可以使用自定义名称，现在就要使用到了。在Vue3中，通过自定义名称可以为组件传递多个值。

v-model传递多个值

<div id="app">
    <child-component v-model:ziruchu="count" v-model:name="webName"></child-component>
</div>

<script>
    const app = Vue.createApp({
        data() {
            return {
                count:0,
                webName:'自如初'
            }
        }
    });

    app.component('childComponent',{
        props:['ziruchu','name'],
        template:`<div @click="incr"><p>我是子组件</p><p>{{ziruchu}}</p> {{name}} </div>`,
        methods:{
            incr(){
                this.$emit('update:ziruchu',this.ziruchu+1)
            }
        }
    });
    app.mount('#app');
</script>

向父组件发出事件，原理是一样的，我这里没有进行记录，方法如下：

this.$emit('update:name',this.ziruchu + 'hi vue3')

modelModifiers修改向父组件发出的数据值

如父组件将name=ziruchu的数据传递给了子组件，子组件想修改数据值并将修改后的值返回给父组件。那么在子组件中可以通过modelModifiers来对数据值进行修改。

<div id="app">
    <child-component v-model.uppercase="webname"></child-component>
</div>

<script>
    const app = Vue.createApp({
        data() {
            return {
                webname:'ziruchu'
            }
        }
    });

    app.component('childComponent',{
        props:{
            'modelValue':String,
            'modelModifiers': {
                // 设置默认值 
                default: () => {}
            }
        },
        mounted(){
        }
        ,
        template:`<div> <p @click="changeValue">{{modelValue}}</p> </div>`,
        methods:{
            changeValue() {
                let uppercaseName = '';
                // uppercase属性为true，则将值转为大写
                if (this.modelModifiers.uppercase) {
                    uppercaseName = this.modelValue.toUpperCase();
                }
                this.$emit('update:modelValue', uppercaseName);
            }
        }
    });

    app.mount('#app');
</script>

注意点：

1）若组件中没有使用修饰符，则modelModifiers为一个空对象；

2）若有修饰符，则修饰符的值为true，如本案例中uppercase:true

3）使用自定义名称时，modelModifiers则是未定义，如v-mode:name.uppercase，不能这样使用。

hi，我是温新

每天进步一点，就一点点