v-model实现双向数据绑定的案例
时间: 2023-08-09 14:07:15 浏览: 62
当使用 `v-model` 进行双向数据绑定时,可以通过在组件中使用 `value` 属性和 `input` 事件来实现数据的传递和同步。下面是一个使用 `v-model` 实现双向数据绑定的案例:
```vue
<template>
<div>
<p>父组件:{{ parentValue }}</p>
<ChildComponent v-model="parentValue"></ChildComponent>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
parentValue: 'Hello'
}
}
}
</script>
```
在上述示例中,父组件使用 `v-model` 绑定了 `parentValue` 数据,并将其作为 `value` 属性传递给子组件。子组件接收到 `value` 属性后,使用 `v-model` 将其绑定到一个输入框上,并监听输入框的 `input` 事件,在事件处理函数中通过 `$emit` 触发 `input` 事件,将输入框的值传递给父组件。
子组件的代码如下:
```vue
<template>
<div>
<p>子组件:{{ inputValue }}</p>
<input v-model="inputValue" type="text">
</div>
</template>
<script>
export default {
props: {
value: String
},
data() {
return {
inputValue: this.value
}
},
watch: {
inputValue(newVal) {
this.$emit('input', newVal); // 触发 input 事件,更新父组件的数据
}
}
}
</script>
```
在子组件中,我们使用 `props` 接收父组件传递的 `value` 属性,并将其赋值给子组件的 `inputValue` 数据。然后将 `inputValue` 绑定到一个输入框上,当输入框的值发生变化时,通过 `watch` 监听 `inputValue` 的变化,然后通过 `$emit` 触发 `input` 事件,将新的值传递给父组件。
这样,父子组件之间就可以通过 `v-model` 实现双向数据绑定了。在父组件中,`parentValue` 的值会随着子组件输入框的改变而更新;在子组件中,输入框的值会随着父组件的 `parentValue` 值改变而更新。