defineModel

来源：3-11 组件自定义事件

qq_慕圣1562754

2024-05-11

<template>
  <div class="y-collapse"><slot /></div>
</template>

<script setup lang="ts">
import { provide } from "vue";
import { collapseContextKey } from "./types";
import type { CollapseProps, NameType } from "./types";
defineOptions({ name: "YCollapse", inheritAttrs: false });
const props = defineProps<CollapseProps>();
const activeNames = defineModel<NameType[]>();

if (props.accordion && activeNames.value.length > 1) {
  console.warn("accordion mode should only have one active item");
}

const handleItemClick = (item: NameType) => {
  if (props.accordion) {
    activeNames.value = [activeNames.value[0] === item ? "" : item];
  } else {
    const index = activeNames.value.indexOf(item);
    if (index > -1) {
      activeNames.value.splice(index, 1);
    } else {
      activeNames.value.push(item);
    }
  }
};

provide(collapseContextKey, {
  activeNames,
  handleItemClick,
});
</script>

老师我改成这样后，activeNames报错了，
provide那报错Type ‘ModelRef<NameType[] | undefined, string>’ is not assignable to type ‘Ref<NameType[]>’.
Types of property ‘value’ are incompatible.
Type ‘NameType[] | undefined’ is not assignable to type ‘NameType[]’.
Type ‘undefined’ is not assignable to type ‘NameType[]’.ts-plugin(2322)
types.ts(16, 3): The expected type comes from property ‘activeNames’ which is declared here on type ‘CollapseContext’

其它地方报错’activeNames.value’ is possibly ‘undefined’.
老师能麻烦你给一个全一点的代码吗

写回答

2回答

张轩

2024-05-14

同学你好

这是我的修改如图，不会报错，也没有问题，完美运行,

主要就是修改为

const activeNames = defineModel<NameType[]>({ required: true })

如果你还会出现类似的类型问题，可以删除 node_modules 重新 npm install 一次

qq_慕圣1562754

感谢老师，我删除了node_modules重新install后，就可以了，感谢！

2024-05-14

共1条回复

张轩

2024-05-12

同学你好

这里做个简单修改，设置 modelValue 为必选试试看：

const activeNames = defineModel<NameType[]>({ required: true })

其他都和你一样的，并没有额外的报错。

我装了最新版本的 vue 3.4.27 并没有出现这个错误，感觉是这两个类型已经兼容了

'ModelRef<NameType[] | undefined, string>’ is not assignable to type ‘Ref<NameType[]>’.'

你把代码（git）给我发一份吧，我在本地帮你调试一下看看。

qq_慕圣1562754

好的，老师，下面是我的代码git连接，麻烦老师抽空帮我调试一下，谢谢! https://github.com/tail1231/y_element.git 文件路径：src\components\Collapse\Collapse.vue

2024-05-13

共1条回复

进阶必学，打造媲美ElementPlus的组件库

Vue3.3 + TS4 ，自主打造媲美 ElementPlus 的组件库

481 学习 · 219 问题

查看课程

相似问题

Vue3.4及以后版本，出现了一个defineModel()宏

回答 2

打开慕课网App查看更多内容