亲宝软件园·资讯

展开

vue引入子组件命名不规范

海盐老伍 人气:0

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

昨天在做一个省市县三级联动子组件,文件名称为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>

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

加载全部内容

相关教程
猜你喜欢
用户评论