vue2组件v-model
时间: 2023-11-04 12:52:16 浏览: 44
Vue 2中的组件可以使用v-model来实现双向数据绑定。当在组件上使用v-model时,它会自动将value属性和input事件作为prop和emit事件进行传递。
在组件中,你需要声明一个props属性来接收父组件传递的值,并在内部使用这个值。同时,你还需要通过$emit方法触发input事件来更新父组件的值。
下面是一个示例:
```vue
<template>
<div>
<input :value="value" @input="$emit('input', $event.target.value)">
</div>
</template>
<script>
export default {
props: ['value'],
}
</script>
```
在父组件中,你可以使用v-model来绑定子组件的值:
```vue
<template>
<div>
<custom-input v-model="message"></custom-input>
<p>Message: {{ message }}</p>
</div>
</template>
<script>
import CustomInput from './CustomInput.vue';
export default {
components: {
CustomInput,
},
data() {
return {
message: '',
};
},
}
</script>
```
这样,当子组件中的input元素的值发生变化时,会自动更新父组件的message值,并且父组件的message值也会同步到子组件进行显示。