vue3 自定义组件v-model

v-model 可以在组件上使用以实现双向绑定。

vue 2.x中 使用方法

子组件代码

  // 子组件代码
<template>
  <div>
    <el-cascader
      :value="officeOrgId"
      :options="options"
      :props="{
        checkStrictly: true,
        label: 'name',
        value: 'id',
        multiple: multiple
      }"
      filterable
      clearable
      :show-all-levels="showAllLevels"
      style="width: 100%"
      @change="handleChange"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      options: []
    }
  },

  props: {
    officeOrgId: {       // 用props接受值
      type: Array,
      default: function () { 
        return []
      }
    },
    multiple: {
      type: Boolean,
      default: false
    },
    showAllLevels: {
      type: Boolean,
      default: false
    }
  },

  model: {
    prop: 'officeOrgId',   // 绑定model的值
    event: 'change'        // 触发事件
  },
  methods: {
    handleChange(val) {
      console.log(val)
      this.$emit('change', val)   // emit 事件 实现双向绑定
    }
  }
}
</script>

vue 3.x中 使用方法

<UploadImg v-model="fileList" />
 // 会被编译成 
<UploadImg :modelValue="fileList" @update:modelValue="newValue => fileList= newValue" />

子组件代码

<template>
  <el-upload
    v-model:file-list="modelValue"
    :action="uploadImgServer"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :on-success="handleSuccess"
    :headers="{
      token: token,
    }"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, defineProps, getCurrentInstance, defineEmits } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { localGet, uploadImgServer } from "@/utils";
import type { UploadProps, UploadUserFile } from "element-plus";
const props = defineProps({
  modelValue: {
    type: Array,
    default: [],
  },
});
const emits = defineEmits(["update:modelValue", "change"]);
const token = localGet("token") || "";
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const imgList = ref([]);
console.log(imgList, "imgList");
const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};

const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
const handleSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile,
  uploadFiles
) => {
  imgList.value = uploadFiles;
  emits("update:modelValue", imgList.value);
};
</script>

v-model 的参数

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

<UploadImg v-model:fileList="fileList" />
 // 会被编译成 
<UploadImg :fileList="fileList" @update:fileList="newValue => fileList= newValue" />

对应的子组件中的代码改成如下代码: 

const props = defineProps({
  fileList: {
    type: Array,
    default: [],
  },
});

const emits = defineEmits(["update:fileList"]);

emits("update:fileList", imgList.value);