v-model自定义双向数据绑定

最新推荐文章于 2024-07-31 16:33:32 发布

哈哈哦0

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量173

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_29207823/article/details/130506966

版权

父组件

<template>
<div>
    <p>{{name}}</p>
    <CustomVModel v-model="name"/>
</div>
</template>

<script>
import CustomVModel from './CustomVModel'
export default {
    components: {
        CustomVModel
    },
    data() {
        return {
            name: 'yi',
        }
    }
}
</script>

子组件

<template>
    <!-- 例如：vue 颜色选择 -->
    <input type="text"
        :value="text1"
        @input="$emit('change1', $event.target.value)"
    >
</template>

<script>
export default {
    model: {
        prop: 'text1', // 对应 props text1
        event: 'change1'
    },
    props: {
        text1: String,
        default() {
            return ''
        }
    }
}
</script>

1. 上面的 input 使用了 :value 而不是 v-model
2. 上面的 change1 和 model.event1 要对应起来
3. text1 属性对应起来