[vue] vue中在组件上使用v-model，完成父子组件通信

我们在vue项目中，经常有这样的需求，父组件绑定v-model，子组件输入更改父组件v-model绑定的数值

vue的双向数据绑定原理是什么？

用Object.defineProperty( )，来监听数据get和set，来实现数据劫持的。

v-model 的使用

Vue 是单项数据流，v-model 只是语法糖而已

<input v-model="haorooms" />
<input v-bind:value="haorooms" v-on:input="haorooms= $event.target.value" />

第一行的代码其实只是第二行的语法糖。然后第二行代码还能简写成这样：

<input :value="haorooms"  @input="haorooms= $event.target.value" />

也就是说，

<input v-model="haorooms" />

也可以写成

<input :value="haorooms"  @input="haorooms= $event.target.value" />

v-model在组件上的使用

vue中v-model如何进行父子组件的通信？

子传父

1. 父组件通过v-model绑定一个变量传给子组件

2. 子组件通过props[‘value’]接收

3. 子组件通过$emit(‘input’,XX）去改变父组件中v-model绑定的变量

demo：点击父组件中的按钮数值加5，点击子组件中的按钮数值减5。

父组件代码如下：

<template>
    <div>
        <child v-model="total"></child>
        <button @click="increse">增加5</button>
    </div>
</template>

<script>
import Child from "./child.vue"
export default {
    components: {
        Child
    },
    data: function () {
        return {
            total: 0
        };
    },
    methods: {
        increse: function () {
            this.total += 5;
        }
    }
}
</script>

子组件代码如下：

<template>
    <div>
        <span>{{value}}</span>
        <button @click="reduce">减少5</button>
    </div>
</template>

<script>
export default {
    props: {
        value: Number  // 注意这里是value
    },
    methods: {
        reduce: function(){
            this.$emit("input", this.value - 5)
        }
    }
}
</script>

参考：
vue中v-model等父子组件通信