Vue3.x自定义组件使用v-model实现双向绑定

1、单个v-mode数据绑定

默认情况下，组件上的v-model使用modelValue作为prop和update:modelValue作为子组件更新父组件值的事件。我们可以通过向v-model传递参数来修改这些名称：

父组件：

<template>
    <!--这里的v-model必须要，否则的话，只能将keyword传给子组件，却无法实现双向绑定-->
    <zdyinput v-model:keyword="word" />
    <br><br>
    {{word}}
</template>
<script>
import zdyinput from './zdyinput';
export default {
    components:{
        zdyinput
    },
    data(){
        return {
            word: '222'
        }
    },
}
</script>

子组件将需要一个keyword的prop并发出update:keyword要同步的事件：

<template>
    <!--update为固定写法，input事件可以换成其他事件-->
    <!--$event.target.value为要更新给父组件keyword的值，不能写keyword，因为这里使用value绑定，不是双向绑定-->
    <input type="text" :value="keyword" placeholder="请输入内容" @input="$emit('update:keyword', $event.target.value)" />
</template>
<script>
export default {
    props:['keyword']
}
</script>

2、多个 v-model 绑定
绑定多个v-model和一个差不多，直接看案例：
父组件调用：

<template>
    <user-name v-model:firstName="name1" v-model:lastName="name2"  />
    <br><br>
    {{name1}} - {{name2}}
</template>
<script>
import UserName from './UserName';
export default {
    components:{
        UserName
    },
    data(){
        return {
            name1: '',
            name2: ''
        }
    },
    methods:{
    }
}
</script>

子组件：

<template>
    <input type="text" :value="firstName" placeholder="姓" @input="$emit('update:firstName', $event.target.value)" /> -
    <input type="text" :value="lastName" placeholder="名" @input="$emit('update:lastName', $event.target.value)" />
</template>
<script>
export default {
    props:['firstName', 'lastName']
}
</script>
<style>
input{
    width: 100px;
    height: 32px;
    line-height: 32px;
}
</style>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！