vue3不使用v-model双向绑定组件
时间: 2023-11-24 21:59:40 浏览: 37
在 Vue 3 中,可以使用 `v-model` 指令来实现双向数据绑定。不过,如果你要自定义一个组件,也可以使用 `modelValue` 和 `update:modelValue` 来实现类似的效果。
例如,假设你有一个自定义的输入框组件 `MyInput`,你可以在组件内部使用 `modelValue` 来接收父组件传递过来的值:
```
<template>
<input :value="modelValue" @input="updateValue($event.target.value)">
</template>
<script>
export default {
props: {
modelValue: {
type: String,
default: ''
}
},
methods: {
updateValue(value) {
this.$emit('update:modelValue', value)
}
}
}
</script>
```
然后在父组件中使用这个组件,你可以使用 `v-bind` 指令将父组件中的值绑定到 `MyInput` 组件的 `modelValue` 属性上,同时使用 `v-on` 指令将 `MyInput` 组件触发的 `update:modelValue` 事件绑定到父组件的一个方法上:
```
<template>
<div>
<my-input v-bind:modelValue="inputValue" v-on:update:modelValue="onInputValueChange"></my-input>
</div>
</template>
<script>
import MyInput from './MyInput.vue'
export default {
components: {
MyInput
},
data() {
return {
inputValue: ''
}
},
methods: {
onInputValueChange(value) {
this.inputValue = value
}
}
}
</script>
```
这样,当 `MyInput` 组件中的输入框发生变化时,它会触发 `update:modelValue` 事件,父组件中的 `onInputValueChange` 方法就会被调用,从而实现了双向数据绑定的效果。