Vue3基础学习笔记（三）探索组件6-组件间双向绑定高级内容

组件间双向绑定高级内容

多个v-model属性的绑定

v-model修饰符

1. 在v-model后加.修饰符名字
2. 修饰符通过props传递给子组件
3. 子组件通过modelModifiers接收（modelModifiers是固定的名字）

<script>
    const app= Vue.createApp({
        data() {
            return { 
                count:'a',
            }
        },
        template:`
            <counter v-model.uppercase="count" />
         `
    });
    app.component("counter",{
        props:{
            'modelValue':String,
            //当不传递修饰符时，默认给modelModifiers一个空对象；当传内容时，uppercase就会放到对象里面，显示为{uppercase: true}
            'modelModifiers':{
                default:()=>({})
            }
        },
        mounted() {
            console.log(this.modelModifiers);
        },
        methods: {
            handleClick(){
                let newValue = this.modelValue+'b';
                if(this.modelModifiers.uppercase){
                    newValue = newValue.toUpperCase();
                }
                this.$emit('update:modelValue',newValue);
            }
        },
        template:`
        <div @click="handleClick">{{modelValue}}</div>
        `
    })
    const vm = app.mount('#root');
</script>