Vue3学习踩坑 - 自定义v-model

前言

我们知道,在vue2中我们可以在自定义组件中使用v-model来实现变量的双向绑定,同样的在vue3中也可以使用这种方式进行处理,这里我们记录下处理方式。

这里我们主要学习如下几个知识点:

1. v-model双向绑定的实现方式
2. v-model:xxx 形式的实现方式

准备工作

1.通过vite初始化的一个vue3的工程,并安装完所有依赖,且正常运行

正文

1.v-model 实现双向绑定

实现方式:

1. 在子组件中,定义属性: modelValue
2. 在子组件中,定义事件: update:modelValue
3. 在子组件中,触发事件,并将需要修改的值作为参数传出
4. 在父组件使用组件后,通过v-model指令来实现数据的双向绑定 代码如下:

子组件: vmodel1.vue

<template>
  <div class="vmodel1">
    <div>
      <button @click="add">add</button>
      <span>{{ props.modelValue }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineEmits } from "vue";

interface iProps {
  modelValue: number;
}

const props = defineProps<iProps>();
interface iEmits {
  (e: "update:modelValue", num: number): void;
}

const emits = defineEmits<iEmits>();
const add = () => {
  emits("update:modelValue", props.modelValue + 1);
};
</script>

父组件: App.vue

<template>
  <div>
    <vmodel1 v-model="num" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Vmodel1 from "@/components/vmodel/vmodel1.vue";

const num = ref<number>(0);
</script>

2.v-model:xxx 实现双向绑定

实现方式:

1. 在子组件中,自定义属性,如: count
2. 在子组件中,定义事件,如: update:count
3. 在子组件中,触发事件,并将需要修改的值作为参数传出
4. 在父组件使用组件后,通过v-model:count指令来实现数据的双向绑定 代码如下:

子组件: vmodel1.vue

<template>
  <div class="vmodel1">
    <div>
      <button @click="add">add</button>
      <span>{{ props.count }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineEmits } from "vue";

interface iProps {
  count: number;
}

const props = defineProps<iProps>();
interface iEmits {
  (e: "update:count", num: number): void;
}

const emits = defineEmits<iEmits>();
const add = () => {
  emits("update:count", props.count + 1);
};
</script>

父组件: App.vue

<template>
  <div>
    <vmodel1 v-model:count="num" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Vmodel1 from "@/components/vmodel/vmodel1.vue";

const num = ref<number>(0);
</script>

结语

注意:

1. 事件的发出必须要按照规则来,即update:xxx,否则无法实现双绑
2. 自定义的v-model同样可以做拆分成属性和事件来分别进行处理,v-model只是个语法糖而已