vue3 双向绑定

描述一下

在 Vue3 中，双向绑定主要是通过使用 v-model 指令令来实现的。v-model 是Vue的语法糖，它在内部使用 v-bind 和 v-on 来实现数据的双向绑定。具体来说，v-model 在内部做了以下两件事情：

1. 将数据绑定到视图层：当数据发生变化时，视图会自动更新以反映最新的数据状态。

2. 将视图的变化反馈给数据层：当用户在视图层进行操作（如输入文本、选择选项等）时，这些变化会被捕捉并同步更新到数据层。

在 Vue3 中，v-model 的工作原理有所变化 v-model 变得更加灵活，它支持多种模式，包括：

1. 默认的双向绑定模式（适用于表单输入元素）。

2. 自定义的双向绑定模式（通过 modelValue 和 update:modelValue 事件）。

常见写法

第一种

手动调用事件

<script lang="js" setup>
const props = defineProps({
  modalValue: {
    type: String
  }
})
const emits = defineEmits(['update:modalValue'])
function handleInputEvent({target: {value}}) {
  emits('update:modalValue', value)
}
</script>
<template>
  <input :value="modalValue" @input="handleInputEvent">
</template>

第二种

利用 computed 来发送事件

<script lang="js" setup>
import {computed} from 'vue'
const props = defineProps({
  modalValue: {
    type: String
  }
})
const emits = defineEmits(['update:modalValue'])
const inputValue = computed({
  get: () => props.modalValue,
  set: (val) => emits('update:modalValue', val)
})
</script>
<template>
  <input v-model:model-value="inputValue" />
</template>

第三种

vue 3.4+ 使用

<script lang="js" setup>
// modifiers v-modal 绑定值的时候是否带修饰符
const [model, modifiers] = defineModel({
  set(value) {
	// 这里可以对值进行处理
    return value
  }
})
</script>

<template>
  <input type="text" v-model="model" />
</template>

v-modal 其他用法

使用内置修饰符对文本进行去空格

<MyComponent v-model:model-value.trim="myText" />

也可以自定义修饰符

<MyComponent v-model.custom="myText" />

<script setup>
const [model, modifiers] = defineModel({
  set(value) {
    if (modifiers.custom) {
		// 修饰符 处理
    }
    return value
  }
})
</script>

<template>
  <input type="text" v-model="model" />
</template>