【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([