vue自定义组件v-model

自定义组件使用v-model

vue中的v-model指令实现了表单的双向绑定，这是官网的一个栗子：

<input type="text" v-model="message">
<p>{{message}}</p>
// v-model只是语法糖，真正的实现形式：
<input type="text" :value="message" @input="message = $event.target.value">

• 将输入框的值绑定到message变量上，这只是单向的，改变message的值可以改变input的value，但是改变input的输入不会改变message。
• 监听input事件，当输入类内容时改变message变量，从而实现了双向绑定。

// HTML部分
<div id="app">
    // 4.父组件的value值绑定到price
    <price-input :value="price" @input="onInput"></price-input>
</div>

// js部分
Vue.component('custom-input',{
    // 1.监听input,输入时触发自定义组件内部的updateVal事件
    template: `<input :value='value' @input='updateVal($event.target.value)' type='text'></input>`,
    // 5.通过props传递，实现父组件值绑定到输入框的value
    props: ['value'],
    methods: {
        // 2.触发父组件上的input事件
        updateVal(val){
            this.$emit('input', val);
        }
    }
});
 
var app = new Vue({
    el: '#app',
    data(){
        price: ''
    },
    methods: {
        // 3.传递过来的值赋给父组件的price变量，实现了输入框到父元素的单向绑定
        onInput(val){
            this.price = val;
        }
    }
})

通过上面的分析，默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。所以当我们在一个自定义组件上使用v-model并不能实现双向绑定，因为自定的组件并没有默认的value和input事件，在使用时，我们需要按照上面那样显式的去声明定义这些东西。这时，model选项就派上用场了，在定义组件的时候，指定prop的值和监听的事件。

<template>
    <input type="text" :value="uname" @input="updateVal($event.target.value)">
</template>

Vue.component('my-input',{
    model: {
        prop: 'uname',
        // 随便命名事件，对应下面$emit即可
        event: 'changeXXX'
    },
    props: {
        uname: {
            type: String,
            default: 'tom'
        }
    },
    methods: {
        updateVal(val){
            this.$emit('changeXXX',val)
        }
    }
})

父组件内使用时，使用v-model就可以啦

// name是父组件中的属性
<my-input v-model="name" value="some value"></my-input>
<p>{{name}}</p>
// 等价于
<my-input :uname='name' @changeXXX='val => {foo = val}' value='some value'></my-input>

版权声明：本文为CSDN博主「Liu_Jun_Tao」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Liu_Jun_Tao/article/details/90232658