首页 » 文章 » 文档 » vuejs 使用问题 » Vue 自定义 v-model(高级)

Vue 自定义 v-model(高级)

模拟 v-model 类似 <input type="text" v-model="name"> 的应用,但对于 vuejs 中的 model 依然有点云里雾里,先记录下来,首先创建 CustomVModel.vue

<template>
    <!--常用的如:vue 颜色选择-->
    <input type="text"
           :value="str"
           @input="$emit('edit',$event.target.value)"
    >
    <!--
        1、上面的 input 使用了 :value 而不是 v-model
        2、上面的 edit 和 model.event 要对应起来
        3、str 属性对应起来

    -->
</template>

<script>
    export default {
        name: "CustomVModel",
        props: {
            str: String,
            default() {
                return ''
            }
        },
        model: {
            prop: 'str', // 对应 props str
            event: 'edit'
        }
    }
</script>

注意代码中的解释,在 Index.vue 中引入 CustomVModel.vue

<template>
    <div>
        <p>高级</p>

        <hr>
        <p>{{name}}</p>
        <!--自定义 v-model-->
        <!--类似 <input type="text" v-model="name">-->
        <CustomVModel v-model="name" />
    </div>
</template>

<script>
    import CustomVModel from './CustomVModel'

    export default {
        name: "index",
        components: {
            CustomVModel,
        },
        data() {
            return {
                name: '慕课'
            }
        }
    }
</script>

»vuejs 使用问题

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Scroll to Top