v-model父子组件通信
时间: 2024-03-20 07:37:39 浏览: 24
v-model是Vue.js中用于实现父子组件通信的一种方式。它可以将父组件的数据双向绑定到子组件的输入框或其他表单元素上,同时也可以将子组件的数据更新反馈给父组件。
在父组件中,通过在子组件上使用v-model指令,并将父组件的数据作为v-model的绑定值,可以实现将父组件的数据传递给子组件。例如:
```html
<template>
<div>
<ChildComponent v-model="parentData"></ChildComponent>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
data() {
return {
parentData: ''
};
},
components: {
ChildComponent
}
};
</script>
```
在子组件中,通过在props中声明一个value属性,并在子组件内部使用该属性来接收父组件传递的数据。同时,通过在子组件内部使用$emit方法触发一个名为input的自定义事件,并将子组件的数据作为参数传递给父组件,可以实现将子组件的数据更新反馈给父组件。例如:
```html
<template>
<div>
<input type="text" :value="value" @input="updateValue($event.target.value)">
</div>
</template>
<script>
export default {
props: ['value'],
methods: {
updateValue(newValue) {
this.$emit('input', newValue);
}
}
};
</script>
```
这样,父组件和子组件之间就可以通过v-model实现双向通信了。