解决vue3 defineProps 引入定义的接口报错

问题遇到的现象

在setup语法糖使用了defineProps，然而在定义类型的时候一旦将接口暴露出去引用就发生了报错

问题相关代码

interface Props {
    /* ... */
}
export {
    type Props
}
<script setup lang="ts">
    import { Props } from '.'
    const props = defineProps<Props>()
</script>

运行结果及报错内容

[@vue/compiler-sfc] type argument passed to defineProps() must be a literal type, or a reference to an interface or literal type.

我的解答思路和尝试过的方法

在组件中直接定义接口就不会报错，

我想要达到的结果

将接口封出去进行引用

以上就是解决vue3 defineProps 引入定义的接口报错的详细内容，更多关于vue3 defineProps 引入报错的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue3 setup语法糖之组件传参(defineProps、defineEmits、defineExpose)示例详解

    vue3官方文档 defineProps 和 defineEmits 都是只能在 <script setup> 中使用的编译器宏.他们不需要导入,且会随着 <script setup> 的处理过程一同被编译掉. defineProps 接收与 props 选项相同的值,defineEmits 接收与 emits 选项相同的值. 父传子  - defineProps 父组件 <template> <div class="Father"> &

  • Vue3 setup添加name的方法步骤

    Vue3 setup添加name的方法步骤

    目录 Vue3中name有什么用呢? Vue3 定义 name 1.自动生成 2.在开启一个script用来定义name 3.使用第三方插件 unplugin-vue-define-options 4.个人想法 我想着直接在script 定义name 不好吗? Vue3 setup 支持 name 插件实现 思路借鉴上面插件 总结 Vue3中name有什么用呢? 1.在递归组件的时候需要定义name 2.配合keep-alive include exclude 可以缓存组件 3.在Vue有报错或

  • vue3中＜script setup＞ 和 setup函数的区别对比

    目录 一.基本语法 setup函数的写法 在<script setup>语法糖的写法 二.使用外部文件区别 setup函数 <script setup>语法糖 三.注册组件 setup函数 <script setup>语法糖 四.使用自定义指令 setup函数 <script setup>语法糖 五.父传子数据通信 setup函数 <script setup>语法糖 六.子传父数据通信 setup函数 <script setup>语法

  • 关于vue3 解决getCurrentInstance 打包后线上环境报错问题

    关于vue3 解决getCurrentInstance 打包后线上环境报错问题

    getCurrentInstance getCurrentInstance 支持访问内部组件实例. WARNING getCurrentInstance 只暴露给高阶使用场景,典型的比如在库中.强烈反对在应用的代码中使用 getCurrentInstance.请不要把它当作在组合式 API 中获取 this 的替代方案来使用. import { getCurrentInstance } from 'vue' const MyComponent = { setup() { const intern

  • 解决在for循环中remove list报错越界的问题

    解决在for循环中remove list报错越界的问题

    最近在搞一个购物车的功能,里面有一个批量删除的操作,采用的是ExpandableListView以及BaseExpandableListAdapter.视乎跟本篇无关紧要,主要是为了记录一个java基础.迭代器iterator的使用 一.错误代码(主要就是购物车的批量删除) /** * 删除选中的 */ public void delSelect() { int groupSize; if (mGropBeens != null) { groupSize = mGropBeens.size();

  • 解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题

    错误描述: 1.保存模型:model.save_weights('./model.h5') 2.脚本重启 3.加载模型:model.load_weights('./model.h5') 4.模型报错:ValueError: You are trying to load a weight file containing 12 layers into a model with 0 layers. 问题分析: 模型创建后还没有编译,一般是在模型加载前调用model.build(input_shape)

  • nginx访问动态接口报错404Not Found问题解决

    目录 问题描述 解决思路 彻底解决 问题描述 计设做了一套招聘背调系统,前后端分别使用了Ant Design Vue与JFinal框架.想要将项目部署到服务器上,但是外部访问一直报错404Not Found 解决思路 把错误定位为:找不到动态接口,但是不知道是项目中出现了问题,还是经nginx代理后出现了问题.因此要分别测试 项目本身的接口 和 nginx代理后的接口. 首先测试项目内接口: 在ubuntu端输入命令:curl http://localhost:port/xxx/xxx 这里我的

  • 解决Python中字符串和数字拼接报错的方法

    解决Python中字符串和数字拼接报错的方法

    前言 众所周知Python不像JS或者PHP这种弱类型语言里在字符串连接时会自动转换类型,如果直接将字符串和数字拼接会直接报错. 如以下的代码: # coding=utf8 str = '你的分数是:' num = 82 text = str+num+'分 | 琼台博客' print text 执行结果 直接报错:TypeError: cannot concatenate 'str' and 'int' objects 解决这个方法只有提前把num转换为字符串类型,可以使用bytes函数把int

  • 解决安装python库时windows error5 报错的问题

    python安装库时,有时候会报错windows error 5,可以尝试关闭所有使用python的编辑器.文件等,然后重新pip安装,如果还是不行,可以将报错最下层文件删除即可(如果不放心可以将该文件先备份),记录之~ windows error错误代码: windows error错误代码: 0操作成功完成. 1功能错误. 2系统找不到指定的文件. 3系统找不到指定的路径. 4系统无法打开文件. 5拒绝访问. 6句柄无效. 7存储控制块被损坏. 8存储空间不足,无法处理此命令. 9存储控制块

  • 解决laravel5.4下的group by报错的问题

    使用ORM查询数据显示这个错,这是因为laravel使用了开启了mysql的严格模式所以 如果要关闭的话,我们需要找到config/database.php这个文件,然后将 mysql下的这个改为false;就会关闭. 既然说严格模式那什么是样模式呢.据我所知在mysql在5.7有一个尿性 [报错:only_full_group_by],就是你group by的数据里面必须包含你查询的数据,意思就是如果你的sql是:select name,age from user group by name;

  • 解决vue.js 数据渲染成功仍报错的问题

    最近在做一个vue项目,用的是官方推荐的axios请求数据,数据结构是一级对象嵌套二级对象,发现一级对象数据渲染不报错,二级数据渲染报错.很是郁闷!data函数如下 export default { name: 'hello', data() { return { card:{} } } } 返回的数据如下: { "object":{ "subObject":"123", ... } } 报错的原因是在data函数return的card里没有二级

  • 解决idea导入ssm项目启动tomcat报错404的问题

    用idea写ssm项目,基于之前一直在用spring boot 对于idea如何运行ssm花费了一番功夫 启动Tom act一直在报404 我搜了网上各种解决办法都不行,花费一天多的时间解决不了 就是在pom中添加下面代码 <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin<

  • 解决angularjs service中依赖注入$scope报错的问题

    控制台错误提示 ionic.bundle.js:26794 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- DutylogService http://errors.angularjs.org/1.5.3/$injector/unpr?p0=<ion-nav-view name="tab-dutylog" class="view-container tab-conte

随机推荐