自定义组件实现v-model
时间: 2023-11-17 13:04:15 浏览: 37
自定义组件实现v-model可以通过在组件中使用value属性和$emit方法来实现双向绑定。具体步骤如下:
1.在组件中定义value属性,用于接收父组件传递的值。
2.在组件中使用$emit方法触发input事件,并将当前组件的值作为参数传递给父组件。
3.在父组件中使用v-model指令绑定自定义组件的value属性和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="inputValue"></custom-input>
</div>
</template>
<script>
import CustomInput from './CustomInput.vue'
export default {
components: {
CustomInput
},
data() {
return {
inputValue: ''
}
}
}
</script>
```
这样就可以实现自定义组件的双向绑定了。