【Vue3】引入组件Failed to resolve component: MyButton If this is a native custom element

引入组件时页面上并没有出现组件的影子,其他元素正常,初步确定是组件引入部分语法出了问题,打开开发者工具看到控制台报出错误代码:

 Failed to resolve component: MyButton If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 

翻译

无法解析组件:我的按钮如果这是本机自定义元素,请确保通过 compilerOptions.isCustomElement 将其从组件解析中排除。

搜到了博主们提供的一些方法比如:

  • 组件的script标签没有添加 setup
  • 引入的时候加了大括号之类的,这种情况很显然不会报出这个错误信息,而是下面这个,而且也会影响页面其他元素的加载
    Uncaught SyntaxError: The requested module '/components/MyButton.vue?t=1676209371149' does not provide an export named 'MyButton'
    



    最后经过自己的排查,发现问题还是因为导入组件时,在components这一步出了问题导致的
<script>
import MyButton from '../components/MyButton.vue'
export default {
    data() {
        return {
            msg: "我爱vue"
        }
    },
    components: {
        MyButton
    }
}
</script>
<template>
    <h1>{{ msg }}</h1>
    <MyButton></MyButton>
    <!-- <MyButton></MyButton> -->
</template>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值