vue 自定义组件怎么 绑定v-model
时间: 2023-02-09 07:51:15 浏览: 104
要在自定义组件上使用 v-model,可以在组件内部使用 props 接收绑定的值,同时使用 $emit 触发自定义事件来更新绑定的值。
首先,在组件的 props 中声明一个用于接收绑定值的 prop,例如:
```
props: {
value: {
type: [String, Number],
required: true
}
}
```
然后,在组件内部使用该 prop 并触发自定义事件来更新绑定的值。例如:
```
<template>
<input v-model="localValue" @input="updateValue" />
</template>
<script>
export default {
props: {
value: {
type: [String, Number],
required: true
}
},
data() {
return {
localValue: this.value
}
},
methods: {
updateValue(event) {
this.localValue = event.target.value
this.$emit('input', this.localValue)
}
}
}
</script>
```
然后,在父组件中使用 v-model 来绑定自定义组件,就像使用普通的表单元素一样。例如:
```
<template>
<custom-input v-model="message" />
</template>
<script>
export default {
data() {
return {
message: ''
}
}
}
</script>
```
在这种情况下,v-model 会将绑定值同步到自定义组件的 value prop 上,并且在自定义组件内部使用 $emit 触发的 input 事件来更新绑定值。