[vue3进阶] 11.自定义v-model

我们之前学习过，可以使用v-model进行数据的双向绑定，
在input输入框内容变化时，我们的数据同时变化，不用我们去手动赋值

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

v-model这个指令是vue为我们提供的一种语法糖，
下面这种写法和使用v-model是等价的

<input
      type="text"
      :value="content"
      @input="content = $event.target.value"
    />

把数据content绑定到input的value上，然后在input事件发生时，改变content的值
完整的代码

<template>
  <div>
    <input
      type="text"
      :value="content"
      @input="content = $event.target.value"
    />
    <div>{{ content }}</div>
  </div>
</template>

<script>
// 自定义v-model
export default {
  name: 'App',
  data() {
    return {
      content: '',
    }
  },
}
</script>

<style></style>

我们在输入框输入内容时，content的值也变化了，
现在知道了v-model的原理，我们也可以在自定义的组件上使用v-model了

我们在日常开发中，表单的输入框通常会有一个标签label，来提示输入框要输入的内容，

现在我们就来开发一个组件，它包括这个标签和input输入框，并且使用自定义v-model

<template>
  <div>
    <label>{{ label }}</label>
    <input
      type="text"
      :value="modelValue" // 3.把modelValue的值绑定到input的value上
      @input="$emit('update:modelValue', $event.target.value)" // 4.在input事件触发时，发送‘update:modelValue’事件
    />
  </div>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: '',
    },
    modelValue: { // 1.在props中定义一个modelValue，用于绑定在输入框中
      type: String,
      default: '',
    },
  },
  emits: ['update:modelValue'], // 2.在emits中声明‘update:moveValue’，这个事件，表明在这个组件中会触发这个事件
}
</script>

<style></style>

总结下来几点就是：
1.在props中定义一个modelValue（默认必须是这个名字），用于绑定在输入框中
2.在emits中声明‘update:moveValue’，这个事件，表明在这个组件中会触发这个事件，这个emits是vue3新增的，之前也说过，这一步和我们今天自定义v-model的主题没关系
3.把modelValue的值绑定到input的value上
4.在input事件触发时，发送‘update:modelValue’事件

这样，我们的自定义组件myInputItem.vue，就可以使用v-model，
在app.vue中使用

<template>
  <div>
    <myInputItem v-model="content" label="用户名"></myInputItem>
    <div>{{ content }}</div>
  </div>
</template>

<script>
// 自定义v-model
import myInputItem from './components/myInputItem.vue'
export default {
  name: 'App',
  components: {
    myInputItem,
  },
  data() {
    return {
      content: '',
    }
  },
}
</script>

<style></style>

效果如下

关于自定义v-model就说这么多了，其实v-model还有更高级的用法，这里就不介绍了，大家先掌握基础用法就行了，平时开发基本也够用了。