vue3+ts+setup语法糖的写法，导入子组件时会报错提示子组件未导出

最新推荐文章于 2024-07-19 10:30:06 发布
最新推荐文章于 2024-07-19 10:30:06 发布
阅读量97 收藏
点赞数 3
文章标签： vue.js typescript vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GPPcollgirl/article/details/140179956
版权

第一次碰见这个问题，因为setup形式的.vue文件就不涉及需要export，直接就可以拿来用才对啊。
但是人家就是报错，报错就报错，你还能正常运行，你别给我笑死。
解决办法如下：
ts不能和vetur插件来结合使用，只能和volar插件来结合使用，插件商店中没有这个插件，咱们就采用这个大佬的方法，来引入这个插件。做这个之前先把vetur禁用掉。
http://t.csdnimg.cn/ECwuN，大佬非常保姆的教程，大家看吧

想不出名字isUsed
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
＜script lang=“ts“ setup＞使用setup语法糖引入组件爆红问题
m0_55070913的博客
03-02 1643
未使用setup语法糖前注册组件： <script lang ="ts"> import { defineComponent, ref, reactive } from "vue"; import AddPoints from './addPoints.vue' export default defineComponent({ components: { AddPoints, }, }) </script> 使用setup语法糖注册组件： <script l
在vue3+ts+setup语法糖中使用图片预览组件
09-14
在Vue3中，开发人员可以利用TypeScript(简称ts)的强类型特性和新的`setup`语法糖来构建更加安全和高效的应用。本教程将详细讲解如何在Vue3项目中结合TypeScript和`setup`语法糖实现图片预览功能。 首先，让我们了解...
Vue3中子组件使用setup语法糖父组件无法调用子组件方法
LRQQHM的博客
06-25 1914
【代码】Vue3中子组件使用setup语法糖。
vue3 setup语法糖 TS 引入组件报错
weixin_45288172的博客
04-10 1204
vue3 setup语法糖 TS 引入组件报错
Uniapp+Vue3+Ts 解决setup语法糖不能export问题＜script＞ and ＜script setup＞ must have the same language type
陈万洲的专栏
12-10 2777
一起使用可以解决下面这些场景下的问题1. 无法在 声明的选项，例如 inheritAttrs 或通过插件启用的自定义的选项。2. 声明命名导出。3. 运行副作用或者创建只需要执行一次的对象。// 普通 ，在模块范围下执行(只执行一次)// 声明额外的选项// 在 setup()作用域中执行(对每个实例皆如此)
vue3+ts 父级页面调用子组件的方法
weixin_44565776的博客
01-30 753
直接将组件实例化，然后将组件中的方法暴露出来，这种用起来非常方便。在父级元素传递给子级元素的过程中，更方便，技能更熟练，省时间。写这篇调用子组件内的文章是想要将梳理自身的知识经验，同时对内进行复盘，让自己在工作之余有所收获，而不是做了很多的项目，当其他人询问技术使用了哪些东西，自己回答不上来，同时也让自己明天，今天的工作有结果，有收获。
vue3 使用Element Plus ＜script lang=“ts“ setup＞加上lang=“ts“后编译错误
weixin_46411355的博客
09-18 5862
vue3 使用Element Plus
【求助】模块““vue“”没有导出的成员“ref”。ts(2305)，vue3+ts开发过程中一直报这个错误
qq_43525395的博客
12-12 630
求助，解决 模块“"vue"”没有导出的成员“ref”。ts(2305) 错误
vue3+ts实战项目组件工具库.zip
03-03
Vue3+TS实战项目组件工具库是一个以Vue3和TypeScript为核心技术的开发资源，旨在帮助开发者构建高效、可复用且类型安全的前端应用。这个压缩包包含了一个名为"visualization-master"的项目，可能是一个专门用于数据...
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3+ts 表单和表格配置化组件
10-26
"vue3+ts 表单和表格配置化组件"这一主题，主要关注的是如何利用Vue3、TypeScript以及Element Plus来创建高度可配置的表单和表格组件。这些组件通常用于处理动态数据，允许开发者通过配置对象来定义表单字段或表格列...
vite5+vue3+ import.meta.glob动态导入vue组件
03-25
2. **导入并处理结果**：在你的 Vue3 应用中，可以使用 `import.meta.glob` 获取到一个 Promise，该 Promise 在所有文件导入完成后解析为一个对象，键是文件的相对路径，值是对应的模块导出。例如： ```javascript ...
[vue问题]模块““../../../node_modules/vue/dist/vue“”没有导出的成员“onMounted”。ts(2305)
前端
03-03 2992
类似这种报错 网上的方法大多是在shims-vue.d中添加声明，但是没有效果，甚至考虑了是不是ts版本没跟上问题，直到我使用的版本都到vue 3.2.31还有这个问题… 终于觉得无法忍了 然后找到了比较靠谱的解决方案，说是vetur的问题，有的说是装的veture版本过多，但是本人只安装了一个版本 我报错的版本是vetur v0.31.0然后几次更新安装后发现版本是v0.31.0 并没有更新，最终是通过vscode更新后重装了vetur扩展插件，v0.35.0然后上述问题都没有了 ...
模块““vue“”没有导出的成员“ref”。
weixin_44891022的博客
04-19 742
当您遇到“模块“‘vue’”没有导出的成员“ref”的错误提示时，这通常意味着在尝试从vue模块导入ref函数时遇到了问题。
setup语法糖中的component组件无效
weixin_42943920的博客
06-03 438
setup语法糖中component动态组件无效
TS 报错 “xxx“没有导出的成员‘xxx‘
qq_33715850的博客
04-10 728
TS 报错 “xxx“没有导出的成员‘xxx‘
学习vue3系列生命周期
zz130428的博客
04-13 398
vue3 增加了些生命周期，可以直接导入 onXXX 一族的函数来注册生命周期钩子：与 2.x 版本生命周期相对应的组合式 API这些生命周期钩子注册函数只能在 setup() 期间同步使用， 因为它们依赖于内部的全局状态来定位当前组件实例（正在调用 setup() 的组件实例）, 不在当前组件下调用这些函数会抛出一个错误。生命周期的用法和 vue2 无太大的区别，只是使用的时候记得把 API 导入进来。
vue.3.x+ts 导入子组件，使用的时候报错
m0_62015496的博客
01-05 2284
不能将类型“{}”分配给类型“ComponentProps
使用Vue实现点击页面触发特效
最新发布
qq_45569925的博客
07-19 695
在页面上的指定区域内进行点击，则会在页面上显示设置好的随机文本，此文本出现后会执行动画，动画效果为节点在1s之内向右上方移动并在移动的过程中完成180°翻转，最后消失。
vue3+ts+setup语法糖如何给iframe地图组件添加点击事件完整代码
03-28
以下是给iframe地图组件添加点击事件的完整代码： ``` <template> <div class="map-container"> <iframe ref="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3502.210327469921!2d-80.19080408538206!3d25.77426648366029!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88d9b10c7d1e17c1%3A0xb0c7e8e067b8c1e3!2sAmericanAirlines%20Arena!5e0!3m2!1sen!2sus!4v1629385667076!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe> </div> </template> <script lang="ts"> import { defineComponent, onMounted } from 'vue'; export default defineComponent({ name: 'MapContainer', setup() { const handleClick = () => { console.log('Map clicked'); }; onMounted(() => { const map = document.querySelector('iframe'); map.contentWindow.document.addEventListener('click', handleClick); }); }, }); </script> <style scoped> .map-container { width: 600px; height: 450px; } </style> ``` 在这个例子中，我们使用了`onMounted`钩子来在组件挂载后添加点击事件。我们使用`document.querySelector`方法选择了iframe元素，并使用`contentWindow`属性来获取iframe内部文档的window对象。然后我们使用`addEventListener`方法添加了一个点击事件监听器。在事件处理程序中，我们可以执行任何我们希望在点击时发生的操作。在这个例子中，我们只是简单地在控制台中打印了一条消息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值