精华内容
下载资源
问答
  • 首先“VUE注册组件命名时能用大写“其实这句话是不对的,但我们很多人开始都觉得是对的,因为大家都踩过大写命名的坑下面我们来看个例子:Vue.component('myTemplate',{template: '这里是自定义组件的内容'})new ...

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

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

    下面我们来看个例子:

    Vue.component('myTemplate',{

    template: '

    这里是自定义组件的内容

    '

    })

    new Vue({

    el: '#app'

    })

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

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

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

    Vue.component('mytemplate',{

    template: '

    这里是自定义组件的内容

    '

    })

    new Vue({

    el: '#app'

    })

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

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

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

    Vue.component('myTemplate',{

    template: '

    这里是自定义组件的内容

    '

    })

    new Vue({

    el: '#app'

    })

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

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

    ”My-template“这样的会报错

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

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

    总结

    以上所述是小编给大家介绍的Vue注册组件命名时不能用大写的原因浅析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    展开全文
  • 写在前面无论是 Vue 还是 React,都有组件的概念。组件,顾名思义就是能和别人组合在一起的物件。在前端页面开发过程中,将一个页面划分成一个个小的模块,每个模块单独定义,每个模块就是一个组件。组件还可以进行...

    写在前面

    无论是 Vue 还是 React,都有组件的概念。组件,顾名思义就是能和别人组合在一起的物件。在前端页面开发过程中,将一个页面划分成一个个小的模块,每个模块单独定义,每个模块就是一个组件。组件还可以进行复用,A 页面和 B 页面有一个相似的模块,可以抽离成一个可局部修改的组件。

    组件化的概念让前端页面开发有了更清晰的结构。

    Vue 中的组件就是一个 Vue 的实例对象。因此,Vue 组件的构造选项和 new Vue() 方法构造 Vue 实例的构造选项是一样的,其可接收的构造选项都是一样的。除了 el 这样 根实例 特有的选项。但是,Vue 组件必须得是可以复用的,因此,就必须要求构造选项中的 data 选项必须是一个函数,该函数返回一个对象。

    为什么 data 选项是个返回对象的函数就可以保证组件的可复用性呢?

    因为无论是 new Vue() 的方式还是定义 Vue组件 的方式创建一个 Vue 实例,其执行的操作都是将构造选项中的各属性值直接赋值给新创建的 Vue 实例对象。组件复用就是 Vue 使用 相同的构造选项 构造出多个同名不同地址的 Vue 实例对象。如果 Vue 组件定义时的构造选项中的 data 选项是一个对象,那么在组件复用时,多个组件就会共用一个 data 数据对象,因为是直接将 data 对象的地址赋值给组件的 Vue 实例的。但如果组件定义时的 data 选项是一个函数的话,那么 Vue 根据构造选项创建组件时会执行该函数从而得到一个对象。这样一来,每次创建 Vue 实例时的 data 对象都是重新生成的,因此,多个组件都有各自的 data 数据对象,不会相互影响。

    实际上,在组件注册时是在定义组件的构造选项,在组件使用时才真正创建对应的 Vue 组件实例。

    1 全局注册

    全局注册的组件可以在 Vue 根实例和所有的子组件中使用。注册入口为Vue.component()函数,一次注册,随时使用,注册方式如下:

    Vue.component('my-component-name',{

    options

    })

    示例如下:

    //main.js

    //此示例是在 vue-cli 创建的项目,默认是非完整版vue,无法用 template 选项,因此使用 render 函数写组件内容。

    Vue.component('all-test',{

    data(){

    return {

    x: '我是全局组件'

    }

    },

    render(h){

    return h('div',this.x)

    }

    })

    //全局注册的组件直接使用即可

    //App.vue

    2 局部注册

    局部注册是通过一个普通的 JavaScript 对象来定义组件。然后组件的命名和注册入口是在 Vue实例 构造选项中的 components 选项。

    let component = { options }

    //new Vue 创建的根元素 Vue 实例

    new Vue({

    el: '#app'

    components: {

    'my-component-name': component

    }

    })

    //或注册 Vue组件 创建的 Vue 实例

    export default {

    components: {

    'my-component-name': component

    }

    }

    示例如下:

    //App.vue

    let ComponentA = {

    data(){

    return {

    x: '我是局部组件 A'

    }

    },

    render(h){

    return h('div',this.x)

    }

    }

    export default {

    name: 'App',

    components: {

    'component-a': ComponentA,

    'component-b': {

    data(){

    return {

    x: '我是局部组件 B'

    }

    },

    render(h){

    return h('div',this.x)

    }

    }

    }

    }

    3 模块系统中局部注册

    在使用了诸如 Babel 和 webpack 的模块系统中可以使用 import 和 export 的方式单独导入组件的构造选项对象 或者 导入对应构造选项的 *.vue 文件。

    //c.js

    export default {

    data(){

    return {

    x: '我是 c.js 文件单独导出的组件构造选项对象'

    }

    },

    render(h){

    return h('div',this.x)

    }

    }

    //D.vue

    {{x}}

    export default {

    data(){

    return {

    x: '我是 D.vue 文件导出的组件'

    }

    }

    }

    //App.vue

    import C from './c.js'

    import D from './components/D.vue'

    export default {

    name: 'App',

    components: {

    C,

    D

    }

    }

    展开全文
  • Vue应用有时候组件多了,一个一个注册引用很麻烦,其实可以把组件文件夹批量注册,然后按需引用。首先在组件文件夹里创建一个 index.js 的文件,里面写扫描此路径下所有组件的逻辑://扫描此文件夹下的所有的`.vue` ...

    Vue应用有时候组件多了,一个一个注册引用很麻烦,其实可以把组件文件夹批量注册,然后按需引用。

    首先在组件文件夹里创建一个 index.js 的文件,里面写扫描此路径下所有组件的逻辑:

    //扫描此文件夹下的所有的`.vue` 文件,并注册

    const componentsWatcher = scanner => {

    scanner.keys().map(key => {

    let name = scanner(key).default.name

    if (name) {

    Vue.component(name, function(resolve) {

    require([key + ''], resolve)

    })

    }

    })

    }

    //扫描匹配条件

    const vueScanner = require.context(

    '@/components',

    true,

    /^\.\/((?!\/)[\s\S])+\/index\.vue$/

    )

    //扫描

    componentsWatcher(vueScanner)

    image.png

    在把 components 文件夹引入到main.js 里

    (() => {

    Promise.all([

    import('@/components'),

    import('./App.vue'),

    import('./router'),

    import('./store')

    ]).then(([{ default: App }, { default: router }, { default: store }]) => {

    new Vue({

    el: '#app',

    router,

    store,

    render: h => h(App)

    })

    })

    })()

    这样只要把组件放在components文件夹下面,不需要注册,调用的地方按需引用直接调用即可:

    import { myComponent } from '@/components'

    展开全文
  • 问题描述使用vue-cli搭建项目并引入了element-ui,项目运行时无法显示element组件,错误信息显示组件未注册,如下图element相关组件已在main.js注册且项目可编译可运行main.jsimport Vue from 'vue'import App from ...

    问题描述

    使用vue-cli搭建项目并引入了element-ui,项目运行时无法显示element组件,错误信息显示组件未注册,如下图

    element相关组件已在main.js注册且项目可编译可运行

    main.js

    import Vue from 'vue'

    import App from './App.vue'

    import router from './router'

    import ElementUI from 'element-ui'

    import 'element-ui/lib/theme-chalk/index.css'

    Vue.use(ElementUI)

    Vue.config.productionTip = false

    new Vue({

    router,

    render: h => h(App)

    }).$mount('#app')

    编译结果

    运行结果

    问题出现的环境背景

    项目目录

    package.json

    bable.config.json

    暂未配置vue.config.json

    自己尝试过哪些方法

    已尝试过在修改bable.config.json的前提下使用按需引入引入element,仍然显示上述错误,推测element未能成功引入

    相关代码

    页面代码

    以上为问题描述

    求大神帮忙解答,感激不尽

    展开全文
  • 前言:在单页面应用开发中,大多数情况下只有一个html页面,那么单页面的页面跳转,其实就是各组件之间的切换,那么这个组件其实就充当的是一个一个独立的html页面的角色,...官方说组件是可复用的 Vue 实例,且带有...
  • 我用的是vue-cli4的版本首先在components 下新建一个common文件用来放常用的需要全局注册的组件 如下图:然后在components 下新建一个globalComponents.js 文件 文件名自定义即可 代码如下:import Vue from "vue";...
  • 为了能在模板中使用,这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型:全局注册和局部注册。至此,我们的组件都只是通过Vue.component全局注册的:Vue.component('component-name', {// ... ...
  • 相信在使用Vue进行项目开发的时候很多人会接触到vue组件,最常见的就是我们使用的element-ui组件库,用起来确实很方便,大大减少了我们的开发时间。在一个项目中其实有很多可复用的代码块,如果我们可以把这些内容...
  • vue框架有Vue.extend()方法,用来创建一个组件构造器,组件构造器创建之后需要注册(全局注册/局部注册)后才可以使用例如://我要局部注册组件,在官网上找到如下的例子var Child = Vue.extend({ /* ... */ })var ...
  • 所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题)我测试了所有框架支持的小程序,只有支付宝小程序用Vue.use内注册组件无效其他都正常,请问现在...
  • 简述Vue除了提供了默认内置的指令外,还允许开发人员根据实际情况...先来看看注册全局指令的方式,通过 Vue.directive( id, [definition] ) 方式注册全局指令,第一个参数为自定义指令名称(指令名称需要加 v- ...
  • 是的,不过知识稍微扩展下,我们引入另一个知识点:职责链模式什么是职责链模式?...如果使用职责链模式,那么在公交车上,我就得先搞清楚谁是售票员,才能把硬币递给他。我们在vue中创建的组...
  • 在使用vue编写项目时,有时候修改了代码导致vue注册的组件并没有在html中使用,这时候编译器会报错:*** component has been registered but not used 报这个错误是因为eslint代码检查到你注册了组件但没有使用...
  • 写博客不是我的爱好,只是人脑毕竟空间只有那么大,有时候会忘了,好记性不如烂笔头,所以通过博客记录点点滴滴,以后可以翻出来看。vue-awesome-swiper官网链接...npm install vue-awesome-swiper --save...
  • Vue 组件注册实例详解

    2020-12-11 15:39:12
    本文实例讲述了Vue 组件注册。分享给大家供大家参考,具体如下: 1 组件名 在注册一个组件的时候,我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了: Vue.component('my-component-name', { /* ... ...
  • Vue全局组件注册

    2020-06-29 17:57:48
    最近编写项目中,会应用到很多基础组件,起初采用了局部注册进行使用,但局部注册对于开发人员并友好,每个阶段都要经历import文件导入,component文件注册两个阶段,开发效率高,于是采用了全局注册方式,引用...
  • 在学习vue时没有深入理解vue,所以在写代码时遇到了一个低级的错误,其错误信息报错如下: 以上报错的意思是: ...这里的主要问题时对于组件的注册顺序没有考虑好,应该先完成组件的注册后再实例化vue对象 ...
  • vue组件全局注册和局部注册

    千次阅读 2019-09-03 10:43:21
    如果想要一个组件在项目中哪里都可以直接调用,这个时候就需要用到全局注册,全局注册的缺点就是:注册了的全局组件,就算需要用到,仍会占用内存 1.创建组件 创建一个文件zujian,在这个文件中创建zujian.vue,在...
  • 03_Vue组件注册

    2020-06-30 16:18:56
    如果你还对组件太了解,推荐你先阅读它。 观看本节视频讲解 组件名 在注册一个组件的时候,我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了: Vue.component('my-component-name', { /* ... */ })...
  • 浅析Vue的组件注册

    2019-01-30 20:07:38
    因为之前看了的VUE组件的几种通信方式,但是对其中一些概念理解并不是非常的清晰,所以打算把Vue的组件注册来重新梳理一下,梳理之后再回去看通信方式,应该会有更好的理解。 Vue的组件注册其实有以下几种: 1....
  • Vue.use 会自动阻止多次注册相同插件,届时即使多次调用也只会注册一次该插件。这就十分类似于单例模式,但不是严格意义上的单例模式。 单例模式强调一个类只能够实例化一个对象,类和对象的数量关系应该是1:N。但是...
  • 尽管React.js在最新JavaScript框架浪潮中引起了很多关注,但Vue.js悄然成为许多开发人员的最爱,他们发现React过于复杂并且想使用webpack工具。 借助Vue,您只需在页面中包含Vue JavaScript文件,创建一些模板,...
  • 简述Vue除了提供了默认内置的指令外,还允许开发人员根据实际情况...先来看看注册全局指令的方式,通过 Vue.directive( id, [definition] ) 方式注册全局指令,第一个参数为自定义指令名称(指令名称需要加 v- ...
  • 本文实例讲述了Vue 组件注册。分享给大家供大家参考,具体如下:1 组件名在注册一个组件的时候,我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了:Vue.component('my-component-name', { /* ... */ }...
  • 最近用 Vue 写项目的时候,用到 axios ,因为 axios 能用 Vue.use() ,所以在每...后来想了想,能能直接把 axios 加到 Vue 的原型中,这样就达到了全局注册了。 1. 首先在 main.js 中引入 axios import Vu...
  • Vue.js 组件注册

    2018-11-20 21:46:26
    注册一个组件的时候,我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了: Vue.component('my-component-name', { /* ... */ }) 该组件名就是 Vue.component 的第一个参数。 你给予...
  • Vue.extend组件的注册

    2019-04-20 18:05:11
    Vue.js的组件注册 为什么会有组件注册呢 1.vue.js文件中暴露出一个Vue的构造器函数, 这个函数的作用...2.有时出于需求,我们需要拓展一些方法,又想写在根实例中,所以Vue.js就给出了一个解决方案,给出了一个方...
  • vue.js的组件注册

    2019-04-22 19:16:57
    Vue.js的组件注册 为什么会有组件注册呢 1.vue.js文件中暴露出一个Vue的构造器函数, 这个函数的作用...2.有时出于需求,我们需要拓展一些方法,又想写在根实例中,所以Vue.js就给出了一个解决方案,给出了一个方...
  • 废话说了,正文来了。防抖使用场景:如搜索框,用户在输入的时候使用change事件去调用搜索,如果用户每一次输入都去搜索的话,就会消耗很大的服务器资源。如果每次用户停止输入后,延迟超过一定时间时,才去请求...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 966
精华内容 386
关键字:

vue注册不了

vue 订阅