关于组件全局注册的问题

关于组件全局注册的问题

http://img1.sycdn.imooc.com//climg/5ee3a03309757c9c09080516.jpg老师您好 在vue的文档中写到像图上这种在Vue构造函数中提供一个components选项属于局部注册,我想知道在vue-cli的main.js中这样写将validationprovider作为components的一个参数传进去是属于局部注册还是全局注册?

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

6回答
Brian 2020-06-17 19:07:37

先回答你对于render函数的理解啊:

import App from App.vue

new Vue({  

    el: '#app',  

    template: '<App />',

    components: {
     App,
    }
})

等价于:

import App from App.vue

new Vue({  

    el: '#app',
    render(h) { return h(App) }
})


提问者 qq_那些荒废流年 2020-06-17 12:03:07
  • 提问者 qq_那些荒废流年 #1
    老师您好 在这里我引入了完整版的vue.js 但是为什么我在main.js里通过componets选项还是无法成功地注册一个组件啊, 我在App.vue里引入这个<test-tag>的时候还是会报错说我没有注册组件
    2020-06-17 12:04:36
  • Brian 回复 提问者 qq_那些荒废流年 #2
    你可以在App.vue的components中注册,或者在你需要使用test-tag的组件的components属性中进行注册。
    2020-06-17 19:11:05
  • 提问者 qq_那些荒废流年 回复 Brian #3
    老师 我好像有点懂了 是否可以这样理解呢 在main.js中通过组件选项components的方式注册的组件是最顶层的组件,App通过components:App这种方式注册了那么它就是整个项目最顶层的组件.如果再通过这种组件选项的方式注册其他组件,那么它只能放到和App.vue同级别的位置上把?因为vue的文档说这种通过组件选项注册的是局部组件,局部组件不能在其他子组件内部使用。所以会发生我说的App.vue里引用失败的情况。 老师你看我这样的理解对吗?
    2020-06-17 19:24:24
提问者 qq_那些荒废流年 2020-06-17 11:52:06
  • 提问者 qq_那些荒废流年 #1
    我记得以前的main.js就是这样写的 这里为什么又能够在components中写了呢老师 这样注册的app组件是全局组件吗?
    2020-06-17 11:53:19
  • 提问者 qq_那些荒废流年 #2
    还有就是这种写法和渲染函数的写法有差别吗
    2020-06-17 11:53:57
Brian 2020-06-17 01:39:01

这个地方有点小失误,可以参考一下组件全局注册的方法,https://cn.vuejs.org/v2/guide/components-registration.html

可以归纳为:

  1. 全局注册:https://cn.vuejs.org/v2/guide/components-registration.html#%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C

    在main.js中注册,可以使用插件的方式Vue.use(需要引用的js中有一个Install方法),或者Vue.component的方式注册。

    所以,是不能在main.js的Vue对象中使用components属性进行注册的。

    需要这么注册:

    Vue.components('组件名', 组件)

  2. 局部注册:https://cn.vuejs.org/v2/guide/components-registration.html#%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C

Vue.component一定要在new Vue()之前使用!


  • 提问者 qq_那些荒废流年 #1
    我有看过你发的这些文档内容老师 但是还有一个问题就是好像以前的vue.cli中main.js的配置不是这样写的 我把图片贴在这个问题回复下面了
    2020-06-17 11:51:32
提问者 qq_那些荒废流年 2020-06-16 22:01:34
  • 提问者 qq_那些荒废流年 #1
    我在app.vue中引入<test-tag>Vue还是会报错,但是通过Vue.component的方式就不会,这是什么问题啊老师 是因为main.js中使用了渲染函数的原因吗
    2020-06-16 22:02:51
  • 提问者 qq_那些荒废流年 #2
    老师我试了一下Vue.component也会报错 说是我使用了运行时版本所以没法编译template,但是为什么我使用组件选项的方式注册ValidationProvider就不可以呀? 我看下源码它也没用template啊 希望老师给个解释
    2020-06-16 22:32:05
Brian 2020-06-14 00:22:52

main.js中这样写将validationprovider作为components的一个参数传进去是属于局部注册还是全局注册?

——main.js这是Vue实例程序的入口,是全局注册的。

你这个一样是挂在了全局的Vue实例的components属性上了啊~~

  • 提问者 qq_那些荒废流年 #1
    老师 那这种写法和Vue.component起到的作用一样吗
    2020-06-14 00:55:26
  • Brian 回复 提问者 qq_那些荒废流年 #2
    是的~~~
    2020-06-15 21:36:40
  • 提问者 qq_那些荒废流年 #3
    老师 我自己写了个测试用例,发现没有办法在main.js中通过组件选项的方式注册全局组件,我把截图发这个提问下面了。
    2020-06-16 22:01:08
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师