使用vue的model选项实现组件通信

了解过v-model的应该都知道，它只是一个语法糖，真正实现的形式是：

<input type="text" :value="message" @input="message = $event.target.value">

实现流程：

1. 将输入框的值绑定到message变量上，这只是单向的，改变message的值可以改变input的value，但是改变input的输入不会改变message。

2. 监听input事件，当输入类内容时改变message变量，从而实现了双向绑定。

从官网上看到，v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：

• text和textarea元素使用value属性和input事件

• checkbox和radio使用checked属性和change事件

• select使用value和change事件

那么，知道原理后，我们来实现v-model也就是双向绑定，就不难了：

子组件

<template>
    <input type="text" :value="uname" @input="updateVal($event.target.value)" />
</template>
<script>
export default{
	model: {
        prop: 'uname',
        // 随便命名事件，对应下面$emit即可
        event: 'changeXXX'
    },
    props: {
        uname: {
            type: String,
            default: 'tom'
        }
    },
    methods: {
        updateVal(val){
            this.$emit('changeXXX',val)
        }
    }
}
</script>

父组件

父组件使用直接用v-model就可以了

<my-input v-model="name" value="some value" />