理解Vue的双向数据绑定
在 Vue
中,双向数据绑定是一项非常强大的功能,它能够使数据和视图之间保持同步,让开发者更加方便的操作数据,在本文中我们将介绍如何用Vue实现数据的双向绑定,实现方法主要有以下两种:
.sync修饰符实现双向数据绑定
.sync
修饰符简化了 属性&事件传值的双向绑定 的模式,虽然比 v-model
的方式稍微麻烦点,但是支持多个数据在组件上双向绑定。
使用 .sync
修饰符修饰一个单项绑定到组件的属性,会默认绑定一个 update:myPropName
的事件,myPropName
是绑定的属性名。
注:这里提到的 update:myPropName
事件是由 Vue
自动添加的,不需要我们手动去定义或者声明。
修改 New.vue
组件如下:
<template>
<!-- 监听input事件,提交.sync修饰符提供的update:<myPropName>事件 -->
<input :value="value" @input="$emit('update:value',$event.target.value)">
</template>
<script>
export default {
props: ['value']
}
</script>
再新建一个 .vue
文件引入 New.vue
并使用:
<template>
<div id="home">
<New :value.sync="query"/>
{{query}}
</div>
</template>
<script>
import New from '../components/New'
export default {
components: { New },
data() {
return {
query: null
}
}
}
</script>
自定义组件实现双向数据绑定
注:除了表单元素外,我们也可以使用自定义组件实现数据的双向绑定。
首先,我们需要定义一个自定义组件,并在其中使用 v-model
指令绑定数据。然后,我们需要在组件中定义一个名为 value
的 prop
,并在组件中使用 $emit()
方法触发一个名为 input
的事件。这样就可以在父组件中使用 v-model
指令绑定自定义组件的值了。
例如,下面是一个自定义的数字输入框组件(New.vue)
:
<template>
<div>
<input type="number" :value="value" @input="$emit('input', $event.target.value)">
</div>
</template>
<script>
export default {
props: {
value: {
type: Number,
default: 0
}
}
}
</script>
在上面这个例子中,我们使用了一个 input
元素来绑定value属性,并在输入时使用 $emit()
方法触发了一个名为 input
的事件。
现在,我们就可以在父组件中使用 v-model
指令来绑定自定义组件的值了:
<template>
<div>
<New v-model="count"></New>
<p>Count: {{ count }}</p>
</div>
</template>
<script>
import New from './New.vue'
export default {
components: { New },
data() {
return {
count: 0
}
}
}
</script>
总结
在 Vue
中,使用自定义组件实现双向数据绑定适用于以下情况:
-
组件数据影响父组件数据
当子组件的data
改变时,父组件的数据也需要改变,此时需要使用双向绑定来同步两者的数据。 -
父组件数据影响子组件数据
当父组件的数据变化时,子组件的数据也需要变化,同样需要双向绑定来更新子组件的数据。 -
兄弟组件间数据相互影响
当一个组件的数据改变时,其他兄弟组件的数据也跟着发生变化,此场景下也需要使用自定义事件来实现双向绑定。