VUE3之Component(三)

组件的v-model

基本使用:一个组件的v-model实际上是添加了两个属性:modelValue和@update:model-value:

<my-input :modelValue="message" @update:model-value="message=$event"></my-input>

在组件中就需要有对应的props和emits:

<template>
    <div>
        <input type="text" :value="modelValue" @input="btnClick">
    </div>
</template>

<script>
    export default {
        props:{
            modelValue: String
        },
        emits:["update:modelValue"],
        methods: {
            btnClick(event){
                this.$emit("update:modelValue",event.target.value);
            }
        },
    }
</script>

也可以通过计算属性来实现:

<template>
    <div>
        <input type="text" v-model="value">
    </div>
</template>

<script>
    export default {
        props:{
            modelValue: String
        },
        emits:["update:modelValue"],
        computed:{
            value:{
                set(value){
                    this.$emit("update:modelValue",value);
                },
                get(){
                    return this.modelValue;
                }
            }
        },
        },
    }
</script>

绑定多个属性:可以在v-model后面用:增加新的属性,对应的在组件中也会有props和emits,以v-model:title为例:

<my-input-2 v-model="message" v-model:title="title"></my-input-2>

props中需要的名称就是title,emits中需要的事件叫@update:title:

<template>
    <div>
        <input type="text" v-model="value">
        <input type="text" v-model="titlec">
    </div>
</template>

<script>
    export default {
        props:{
            modelValue: String,
            title:String
        },
        emits:["update:modelValue","update:title"],
        computed:{
            value:{
                set(value){
                    this.$emit("update:modelValue",value);
                },
                get(){
                    return this.modelValue;
                }
            },
            titlec:{
                set(value){
                    this.$emit("update:title",value);
                },
                get(){
                    return this.title;
                }
            }
        },
    }
</script>

发表评论

您的电子邮箱地址不会被公开。