我们在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如何进行父子组件的通信?
子传父
父组件通过v-model绑定一个变量传给子组件
子组件通过props[‘value’]接收
子组件通过$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>