【Vue】深入理解v-model指令-父子组件数据绑定

一、什么是v-model？

v-model是Vue.js中的一个指令，用于在表单元素上实现数据的双向绑定。简单来说，v-model可以让我们轻松地读取和更新数据，无需手动操作DOM。

二、标签选择器组件分析

我们先来看一下子组件的代码：

<template>
  <el-select
    v-model="tags"
    multiple
    filterable
    allow-create
    default-first-option
    :reserve-keyword="false"
    placeholder="可输入添加标签"
    @change="updateTagsValue"
  >
    <el-option
      v-for="item in tagsList"
      :key="item.ID"
      :label="item.label"
      :value="item.label"
    />
  </el-select>
</template>

在这个组件中，我们使用了Element UI的组件来实现多选标签功能。通过v-model指令，我们将tags变量与组件的值进行了双向绑定。

三、v-model在子组件中的应用

在子组件的

const emits = defineEmits(['blur', 'update:tags']);
const props = defineProps({
  tags: {
    type: Array,
    default: [],
  },
});
watch(
  () => props.tags,
  (vals) => {
    tags.value = vals;
  },
  {
    deep: true,
    immediate: true,
  }
);

这里，我们通过defineEmits定义了一个自定义事件update:tags，用于在子组件中更新tags的值。同时，我们通过defineProps接收父组件传递的tags数组。

当props.tags发生变化时，我们通过watch监听器将新的值赋给tags.value，从而实现数据的双向绑定。

四、v-model在父组件中的应用

在父组件中，我们这样使用标签选择器组件：

<TagSelector v-model:tags="formData.tags" />

这里的v-model:tags实际上是一个语法糖，它等同于：

<TagSelector :tags="formData.tags" @update:tags="formData.tags = $event" />

当子组件中的tags值发生变化时，会触发update:tags事件，并将新的值传递给父组件。父组件通过监听这个事件，更新formData.tags的值，从而实现数据的双向绑定。

五、完整示例

子组件：

<template>
  <el-select
    v-model="tags"
    multiple
    filterable
    allow-create
    default-first-option
    :reserve-keyword="false"
    placeholder="可输入添加标签"
    @change="updateTagsValue"
  >
    <el-option
      v-for="item in tagsList"
      :key="item.ID"
      :label="item.label"
      :value="item.label"
    />
  </el-select>
</template>

<script setup>
defineOptions({
  name: 'TagSelector',
});

import { watch, ref, onMounted } from 'vue';
import { getTagList } from '@/api/code_quest/tag';

const tagsList = ref([]);
const tags = ref([]);

const emits = defineEmits(['blur', 'update:tags']);
const props = defineProps({
  tags: {
    type: Array,
    default: [],
  },
});

onMounted(() => {
  updateTags();
});

const updateTagsValue = (vals) => {
  emits('update:tags', vals);
};
const updateTags = async () => {
  const res = await getTagList({ pageSize: 9999 });
  if (res.code === 0) {
    tagsList.value = res.data.list;
  }
};

watch(
  () => props.tags,
  (vals) => {
    tags.value = vals;
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>

父组件使用：

<TagSelector v-model:tags="formData.tags" />

六、总结

通过本文的讲解，我们了解了v-model在Vue组件中的应用。利用v-model，我们可以轻松实现父子组件之间的数据双向绑定，提高代码的可维护性和简洁性。在实际开发中，掌握v-model的使用技巧对于提高开发效率具有重要意义。