vue引入子组件命名不规范错误的解决方案

目录
  • 引入子组件命名不规范错误
    • 根据规范注意以下
  • vue组件名称命名说明
    • 自定义组件名方式

引入子组件命名不规范错误

昨天在做一个省市县三级联动子组件，文件名称为threelink.vue，结果总是报以下错误，用了各种方法还是报错，系统引入过另一个组件fetch.vue没有问题，但这组件总是报以下错误。

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.

代码如下：

//threelink.vue代码为：
  export default {
    name: 'Threelink',
//引用文件导入为：
      import Threelink from "@/components/xiyou/threelink/threelink"
    
      export default {
            components: { Threelink },
//文件中使用为：
     <el-col  :span="16" class="city-select">
        <three-link :adcode="adcode"></three-link>
      </el-col>

经过反复检查，由于这个组件名称是2个字母引入，由于VUE在不同的地方对驼峰字符要求不一下，引入文件改为如下才能使用。

  import ThreeLink from "@/components/xiyou/threelink/threelink"
export default {
    components: { ThreeLink },

根据规范注意以下

1、子组件文件名全为小写：threelink

2、子组件export名第一字符大写：Threelink

3、引入组件每个字符都要大写：ThreeLink

4、components，与第3一样

5、使用的地方，用小写字符，用“-”分隔开，three-link

此问题反复试了多次，特此记录。

vue组件名称命名说明

在使用Vue自定义组件时，需要给组件命名，即在注册一个组件的时候，我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了：

Vue.component('my-component-name', { 
    /* ... */ 
})

该组件名就是 Vue.component 的第一个参数。

给予组件的名字可能依赖于打算拿它来做什么。当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。

可以在风格指南中查阅到关于组件名的其它建议。

自定义组件名方式

使用 kebab-case命名组件

当使用 kebab-case (小写字母加短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。

例如：

Vue.component('my-component-name', { 
    /* ... */ 
})

使用 PascalCase命名组件

Vue.component('MyComponentName', {
     /* ... */ 
})

当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。

注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。而用驼峰法的名称是无效的。例如以下引用组件无效：

<div id="app">
        <div class="my">父组件自己</div>
        <!-- 调用子组件时ChildComponent无效，必须用kebab-case方式 -->
        <ChildComponent></ChildComponent>
 
        <!-- 
        调用子组件时child-component有效，
        组件定义时可以用kebab-case方式或者PascalCase方式命名 
        -->
        <child-component></child-component>
</div>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue 引入子组件报错的问题

    错误信息: Do not use built-in or reserved HTML elements as component id: header 源码: <script> import header from "./components/header" import aside from "./components/aside" import footer from "./components/footer" export de

  • 详解vue引入子组件方法

    前端框架vue,在利用脚手架工具vue-cli创建前端项目时候,怎么引入组件呢?下面是详细的写法. 1.第一步,利用vue-cli创建一个vue前端项目,文件夹如下图 2.第二步,例子是在hom.vue界面引入子组件header.vue,如下图 3.第三步,给子组件header.vue命名一个全局的id, export default { name: 'HomeHeader' } 代码如下图 4.第四步,返回home.vue组件,引用header.vue组件代码如下图 HomeHeader 对应

  • 深入解析Vue 组件命名那些事

    There are only two things in Computer Sciences: cache invalidation and naming things. -- Phil Karlton 诚如上述所言,编程中变量命名确实令人很头疼.我们模糊地知道,Vue 组件的名称最好不要和原生 HTML 标签相同.为了避免重名,通常会在组件名称前面加上一个前缀,如 el-button.el-input.el-date-picker.这通常不会有什么问题,但有时候你的模板中混杂了原生 HTML

  • vue引入子组件命名不规范错误的解决方案

    目录 引入子组件命名不规范错误 根据规范注意以下 vue组件名称命名说明 自定义组件名方式 引入子组件命名不规范错误 昨天在做一个省市县三级联动子组件,文件名称为threelink.vue,结果总是报以下错误,用了各种方法还是报错,系统引入过另一个组件fetch.vue没有问题,但这组件总是报以下错误. Unknown custom element: - did you register the component correctly? For recursive components, mak

  • vue通过子组件修改父组件prop的多种实现方式

    vue通过子组件修改父组件prop的多种实现方式

    目录 前言 常用方式 1. 通过父组件on监听子组件emit事件实现修改prop 2. 通过父组件sync修饰符 + 子组件emit事件实现修改prop 取巧方式 3.通过data实现修改prop 4.通过计算属性computed实现修改prop 前言 实际工作项目开发中,很经常会有父组件先传递值给子组件,再由子组件渲染展示的场景,下面我总结一下目前工作中遇到和用过的一些方式,也算是给大家一个实现方式和思路参考,如有理解不对or有其他方法欢迎在评论区留言指导- 常用方式 推荐,遵循prop单向传

  • React为 Vue 引入容器组件和展示组件的教程详解

    如果你使用过 Redux 开发 React,你一定听过 容器组件(Smart/Container Components) 或 展示组件(Dumb/Presentational Components),这样划分有什么样的好处,我们能否能借鉴这种划分方式来编写 Vue 代码呢?这篇文章会演示为什么我们应该采取这种模式,以及如何在 Vue 中编写这两种组件. 为什么要使用容器组件? 假如我们要写一个组件来展示评论,在没听过容器组件之前,我们的代码一般都是这样写的: components/Comment

  • vue打开子组件弹窗都刷新功能的实现

    vue如何一打开子组件弹窗都刷新? 在父页面中给子组件同时绑定:visible.sync和v-if :visible.sync="paramAddDialog" v-if="paramAddDialog" 整体代码: <el-dialog title="绑定其他更多的账户" width="1200px" align="center" :visible.sync="paramAddDialog

  • vue动态子组件的两种实现方式

    文章目录 方式一:局部注册所需组件 使用缓存 方式二:动态注册组件实现 让多个组件使用同一个挂载点,并动态切换,这就是动态组件. 通过使用保留的 <component>元素,动态地绑定到它的 is 特性,可以实现动态组件. 方式一:局部注册所需组件 <div id="example"> <button @click="change">切换页面</button> <component :is="curre

  • Vue.js子组件向父组件通信的方法实例代码详解

    一.场景描述: 曾经有个电商项目,其中有个"老带新"模块,而且该模块新增的入口很多,但是新增后展示效果还不一样,当时就考虑将新增的组件单独拿出来,其实就是一个子组件向父组同步数据的过程. 当然,背景不重要了,关键是看实现的方式. 二.场景展示效果 (PS:展示效果请忽略美感) 三.如何实现 注意:Vuejs架构通过vue-cli 3.X搭建的项目,版本无所谓. 1.先看下目录体系,下图子组件放在components文件夹内,模拟子组件为itemAdd.vue,父组件视图放在views文

  • vue.js 子组件无法获取父组件store值的解决方式

    子组件: props:['myDetail'] 父组件: <子组件 :myDetail="detail"></子组件> computed:{ detail(){ return this.$store.state.XXXX.yyyy } } 子组件的参数值不会随着父组件store中参数值的改变而改变 修改为 父组件: data:{ detail:{} } methods:{ reloadDetail(){ this.detail=JSON.parse(JSON.s

  • vue 路由子组件created和mounted不起作用的解决方法

    判断项目是否启用keep-alive 启用 使用exclude排除组件(我没有成功不知道为什么) <keep-alive exclude="needExcludeComponentName"> <router-view></router-view> </keep-alive> 使用v-if判断(成功解决) <keep-alive v-if="!$route.meta.noKeepAlive"> <ro

随机推荐