Vue 3.x——不修改子组件情况下 v-model 嵌套解决方案

Posted 2022-02-21 Starzkg

Demo

<template>
  <el-select
    :modelValue="modelValue"
    placeholder="学院"
    @update:modelValue="(val) => $emit('update:modelValue', val)"
  >
    <el-option
      v-for="item in options"
      :key="item"
      :label="item"
      :value="item"
    />
  </el-select>
</template>

<script lang="ts">
import  defineComponent  from "vue";

export default defineComponent(
  name: "AcademicSelect",
);
</script>

<script lang="ts" setup>
defineProps(
  modelValue: 
    type: String,
    required: true,
    default: "-1",
  ,
);

defineEmits(["update:modelValue"]);

const options = [
  "理学院",
  "材料科学与工程学院",
  "服装学院",
  "信息学院",
  "机械与自动控制学院",
  "建筑工程学院",
  "生命科学与医药学院",
  "经济管理学院",
  "艺术与设计学院",
  "法政学院",
  "外国语学院",
  "国际教育学院",
  "继续教育学院",
];
</script>

<style scoped></style>

参考文章

• v-model参数
• 如何优雅的在嵌套组件中都使用v-model
• vue 子组件快速更改父组件prop的置 update:modelValue
• 嵌套 v-model 解决 Unexpected mutation of “XXX“ prop vue/no-mutating-props