Vue注册组件命名时不能用大写的原因浅析

这段时间一直在弄vue，当然也遇到很多问题，这里就来跟大家分享一些注册自定义模板组件的心得。

首先“VUE注册组件命名时不能用大写“其实这句话是不对的，但我们很多人开始都觉得是对的，因为大家都踩过大写命名的坑

下面我们来看个例子：

<div id="app">
  <myTemplate></myTemplate>
</div>
<script>
  Vue.component('myTemplate',{
    template: '<h1>这里是自定义组件的内容</h1>'
  })
  new Vue({
    el: '#app'
  })
</script>

当我看完官网的文档后，信心满满的第一次准备自定义组件时，就写的跟上面差不多类型的代码

但是当我运行代码时，组件并没有被渲染出来，反而报错了说我用的组件没有注册，我当时真是挤破脑袋想了半天也没发现问题出在哪里

这时候我在想难道我的命名和源码里的冲突了？于是我把代码改成这样了↓

<div id="app">
  <mytemplate></mytemplate>
</div>
<script>
  Vue.component('mytemplate',{
    template: '<h1>这里是自定义组件的内容</h1>'
  })
  new Vue({
    el: '#app'
  })
</script>

然后运行代码，ok完全正常，这时候大家都会认为vue注册组件不能用大写命名，我当时也这么认为的，直到这两天在用饿了么elementUI框架，当我看了他们的源码，发现原来并不是这样

他们注册组件的命名就和我第一次一样myTemplate，标准的驼峰命名方法，那么我一开始为什么会报错呢？这是为什么呢？难道VUE嫌弃我？

原来是我调用组件时的方法错了，VUE是允许用大写字母来注册组件的，但当你使用时得在驼峰命名的大写字母间加上”-“并都改为小写，看下面代码

<div id="app">
  <my-template></my-template>
</div>
<script>
  Vue.component('myTemplate',{
    template: '<h1>这里是自定义组件的内容</h1>'
  })
  new Vue({
    el: '#app'
  })
</script>

　　代码运行正常，这个时候大家是不是看出来，vue其实是可以用大写字母命名注册的

后面我也试了很多种命名方式，比如”my-template“这样也是可以的

”My-template“这样的会报错

----------------------------------------------------------------

后来在官网看到这句话camelCase vs. kebab-case    HTML 特性是不区分大小写的。所以，当使用的不是字符串模版，camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名： 如果你使用字符串模版，则没有这些限制。

总结

以上所述是小编给大家介绍的Vue注册组件命名时不能用大写的原因浅析,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • 深入解析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

  • VueJS 组件参数名命名与组件属性转化问题

    HTML 特性是不区分大小写的.所以,当使用的不是字符串模版,camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名: Vue.component('child', { // camelCase in JavaScript props: ['myMessage'], template: '<span>{{ myMessage }}</span>' }) 如果你使用字符串模版,则没有这些限制. <!-- kebab-

  • Vue注册组件命名时不能用大写的原因浅析

    这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得. 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的,因为大家都踩过大写命名的坑 下面我们来看个例子: <div id="app"> <myTemplate></myTemplate> </div> <script> Vue.component('myTemplate',{ tem

  • 详解Vue注册组件的方法

    目录 简介 说明 官网网址 组件名字 全局注册(一般用于框架) 局部注册(不常用) 模块系统 在模块系统中局部注册(常用) 基础组件的自动化全局注册 简介 说明 本文介绍Vue注册组件的方法. Vue注册组件有这几种:全局注册.局部注册.在模块系统中注册. 官网网址 https://v2.cn.vuejs.org/v2/guide/components-registration.html 组件名字 注册一个组件的时候,需要给它一个名字.比如在全局注册: Vue.component('my-com

  • vue 注册组件的使用详解

    一.介绍 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树 那么什么是组件呢? 组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素. 二.如何注册组件 Vue.js的组件的使用有3个步骤:创建组件构造器.注册组件和使用组件. 下面用代码演示这三步 <!DOCTYPE html> <html> <body> <div id=&q

  • vue注册组件的几种方式总结

    1.全局注册(这种方式注册组件必须在vue实例化之前声明) Vue.component('tag-name',{}) 2.局部注册 var Child = { template: '<div>A custom component!</div>' } new Vue({ // ... components: { // <my-component> 将只在父模板可用 'my-component': Child } }) 3.扩展实例 // 定义一个混合对象 var myMi

  • Vue动态设置图片时src不生效的原因及解决方法

    Vue动态设置图片时src不生效的原因及解决方法

    目录 原因分析 解决方法 import和require的区别 原因分析 在vue项目中动态设置img的src时,图片会加载失败.我们可以先看个例子. <template> <div> <h1>动态设置图片</h1> <div> <h5>图片一</h5> <img :src=" logoFlag === 'vue' ? '../assets/vue-logo.png' : '../assets/react-l

  • vue里的data要用return返回的原因浅析

    官网的示例 var vm = new Vue({ el: '#example', data: { message: 'Hello' } }); 项目中的写法 data() { return { message: 'Hello' } } 为什么要把data变成函数并return属性呢? 组件是一个可复用的实例,当你引用一个组件的时候,组件里的data是一个普通的对象,所有用到这个组件的都引用的同一个data,就会造成数据污染. 将data封装成函数后,在实例化组件的时候,我们只是调用了data函数

  • 解决Vue的组件属性this不存在问题

    目录 Vue的组件属性this不存在 问题来源 原因 解决方案 Vue中的this丢失 解决方案 Vue的组件属性this不存在 问题来源 今天写代码,发现我的mounted方法里面的this全部一致是undefined,很奇怪,一致再找问题然后我找到问题了. 原因 原因是我用mounted方法的时候一致是采用的箭头函数而箭头函数的话是和父作用域相关的,所以不会绑定到实例. 脑袋之前一致没转到这个问题上来坑死我了. 解决方案 在实例的属性里面坚决不要使用箭头函数!!!!!!!!!!! Vue中的

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

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

  • vue复合组件实现注册表单功能

    本文实例为大家分享了vue注册表单的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"></script> </head> <body> <div id="cont

随机推荐