vue2中v-model实现父子组件通信
时间: 2023-08-12 18:55:55 浏览: 127
在Vue 2中,可以使用`v-model`指令来实现父子组件之间的双向绑定通信。下面是一个简单的示例:
首先,在父组件中定义一个属性,并使用`v-model`指令绑定到子组件上:
```vue
<template>
<div>
<child-component v-model="message"></child-component>
<p>父组件中的消息:{{ message }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
message: ''
};
}
};
</script>
```
然后,在子组件中,使用`props`接收父组件传递的值,并使用`$emit`方法触发一个名为`input`的事件来更新父组件的值:
```vue
<template>
<div>
<input type="text" :value="value" @input="$emit('input', $event.target.value)">
</div>
</template>
<script>
export default {
props: ['value']
};
</script>
```
这样,当在子组件中输入内容时,会触发`input`事件并更新父组件的`message`属性值。同时,父组件中的`message`属性值的变化也会通过`v-model`指令传递给子组件。
这就是在Vue 2中使用`v-model`实现父子组件通信的方法。
阅读全文