vue3模型交互怎么做
时间: 2024-05-04 16:21:20 浏览: 7
Vue 3 中的模型交互可以通过使用 `v-model` 指令来实现双向绑定。 `v-model` 指令可以在表单元素(如 input、textarea、select)和组件上创建双向数据绑定。
例如,你有一个组件 `MyComponent`,它包含一个文本输入框和一个按钮,可以通过以下方式实现输入框中的文本和按钮的交互:
```vue
<template>
<div>
<input v-model="text">
<button @click="reverseText">Reverse Text</button>
</div>
</template>
<script>
export default {
data() {
return {
text: ''
}
},
methods: {
reverseText() {
this.text = this.text.split('').reverse().join('')
}
}
}
</script>
```
在上面的代码中,我们使用 `v-model` 将输入框中的 `text` 双向绑定到组件实例的 `text` 属性。当用户在输入框中输入文本时,`text` 属性也会更新。当用户点击按钮时,`reverseText` 方法会将 `text` 属性中的文本反转。
除了表单元素和组件之外,`v-model` 也可以用于自定义组件中。你只需要在自定义组件中实现 `modelValue` 属性和 `update:modelValue` 事件即可。例如:
```vue
<template>
<div>
<my-custom-input v-model="text"></my-custom-input>
</div>
</template>
<script>
import MyCustomInput from './MyCustomInput.vue'
export default {
components: {
MyCustomInput
},
data() {
return {
text: ''
}
}
}
</script>
```
在上面的代码中,我们使用 `v-model` 将 `text` 属性双向绑定到自定义组件 `MyCustomInput` 的 `modelValue` 属性。当用户在自定义组件中输入文本时,`modelValue` 属性也会更新。当用户在父组件中更新 `text` 属性时,`MyCustomInput` 组件也会相应地更新。
总之,Vue 3 中的模型交互可以通过 `v-model` 指令实现双向绑定,不仅适用于表单元素和组件,也适用于自定义组件。