Vue基础-自定义事件的表单输入组件、自定义组件的 v-model

Vue 测试版本：Vue.js v2.5.13

学习 Vue 的自定义事件的表单输入组件，觉得文档讲的不太细致，所以这里再细化一下：

如果不用 v-model，代码应该是这样：

<myinput
 v-on:par-input="price=arguments[0]"
 v-bind:par-value="price"
 > </myinput>
<p>{{price}}</p>

window.onload = function() {

    Vue.component('myinput', {
        template: `
       <input type="text" v-on:input="updateV($event.target.value)" v-bind:value="parValue"
       ></input>
       `,
        props: ['par-value'],
        methods: {
            updateV(v) {
                this.$emit('par-input', v);
            }
        }
    });

    new Vue({
        el: '#app',
        data: {
            price: ''
        }
    });
};

注意父子组件是通过 par-value 实现绑定的，监听的是父组件的 par-input 事件，注意父子组件之间的绑定和数据传递，简单来说：

数据绑定：

• input 元素的 value 属性与父组件 myinput 的 parValue 绑定 =>
• 父组件 myinput 的 parValue 与 Vue 实例的 price 绑定 =>
• input 元素的 value 属性与 Vue 实例的 price 间接绑定

事件传递：

• input 元素的 input 事件触发 updateV 回调 =>
• updateV 回调里手动触发父组件 myinput 的自定义事件 par-input ，并传递 input 元素的值 $event.target.value=>
• 父组件 myinput 的自定义事件 par-input 把 Vue 实例的 price 属性改为 $event.target.value，实现数据更新；

---

这个逻辑可以用 v-model 语法糖来简化：

<myinput v-model="price"></myinput>

<p>{{price}}</p>

window.onload = function() {

    Vue.component('myinput', {
        template: `
       <input type="text" v-on:input="updateV($event.target.value)" v-bind:value="value"
       ></input>
       `,
        props: ['value'],
        methods: {
            updateV(v) {
                this.$emit('input', v);
            }
        }
    });

    new Vue({
        el: '#app',
        data: {
            price: ''
        }
    });
};

v-model 简化了代码，所以其中的传递方式都采用了默认的 input 事件 和 value 属性，前后对比下，就可以发现：

• 父组件 myinput 的自定义事件与子组件 input 的事件名一致，都是通过 input 来触发，且数据都是通过 value 属性绑定和传递；

---

但是：

默认情况下，一个组件的 v-model 会使用 value prop 和 input 事件。但是诸如单选框、复选框之类的输入类型可能把 value 用作了别的目的。model 选项可以避免这样的冲突：

这个时候，如果还要用 model ，肯定要做些修改，譬如下面：

<mycheckbox v-model="isChecked"></mycheckbox>
<p>{{isChecked}}</p>

window.onload = function() {

    Vue.component('mycheckbox', {
        template: `
       <input type="checkbox" v-on:change="updateV($event.target.checked)" v-bind:checked="checked"
       ></input>
       `,
        props: ['checked'],
        model: {//新增
            prop: 'checked',
            event: 'change'
        },
        methods: {
            updateV(v) {
                this.$emit('change', v);
            }
        }
    });

    new Vue({
        el: '#app',
        data: {
            isChecked: false
        }
    });
};

除了 model 是新增的参数，其他的根据实际情况做些正常修改，应该都可以理解，这里的 model 结合最前面的绑定，应该也能理解。

参考资料：

https://cn.vuejs.org/v2/guide/components.html#使用自定义事件的表单输入组件