vue3中自定义组件中使用v-model做响应式处理

一、form原生元素应用v-model

v-model是vue中的一个指令语法糖，v-model在原生元素上的应用：

<input v-model="searchText" />

上面的代码其实等价于下面这段 (编译器会对 v-model 进行展开)：

<input 
  :value="searchText"	
  @input="searchText = $event.target.value"
/>

相当于使用input的原生value属性动态绑定一个变量searchText，原生input属性绑定一个内联事件给searchText进行赋值。
若看的不是很明白，那将input属性绑定为一个方法事件：

<template>
  <input :value="searchText" @input="handleInput" />
</template>

<script setup>
import { ref } from "vue";
let searchText = ref("hello");
funciton handleInput(e){
  searchText.value = e.target.value;
  console.log("searchText: ", searchText.value);
}
</script>

二、自定义组件应用v-model

1、默认展开为"modelValue"、“update:modelValue”

在一个自定义组件上使用v-model时，

<CustomInput v-model="searchText" />

v-model 默认会被展开为如下的形式：

<CustomInput
  :modelValue="searchText"
  @update:modelValue="newValue => searchText = newValue"
/>

CustomInput.vue 组件代码：

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

自定义组件内部有时候不一定是form表单元素，其他元素也是一样的操作。如：定义一个button元素点击更改modelValue的值。

<template>
  <CustomDiv v-model="tagName"></CustomDiv>
</template>

<script setup>
import { ref, watch } from "vue";
let tagName= ref("CUSTOMDIV");
watch(tagName, (newVal, oldVal) => {
  console.log("newVal: ", newVal, "oldVal: ", oldVal);
});
</script>

CustomDiv.vue组件代码：

<template>
  <div>当前元素的tagName：{{ props.modelValue }}</div>
  <button @click="handleClick">获取tagName</button>
</template>

<script setup>
const props = defineProps(["modelValue"]);
const emit = defineEmits(["update:modelValue"]);
function handleClick(e) {
  console.log(e.target);
  emit("update:modelValue", e.target.tagName);
}
</script>

初始化页面：

点击按钮后获取新的tagName：

2、v-model带参数

默认情况下，v-model 在组件上都是使用 modelValue 作为 prop，并以 update:modelValue 作为对应的事件。我们可以通过给 v-model 指定一个参数来更改这些名字：

<CustomInput v-model:title="searchText" />

v-model 默认会被展开为如下的形式：

<template>
  <input
    type="text"
    :value="title"
    @input="$emit('update:title', $event.target.value)"
  />
</template>

<script setup>
defineProps(['title'])
defineEmits(['update:title'])
</script>