Vue.use和Vue.component,注册全局组件时的差异

学习大神的代码,注册自己的组件到全局。
组件文件下的index文件:

import Add from "./Add.vue"

export default (Vue)=>{
  Vue.component(Add.name,Add)
}

src下的index文件中:

import Add from "./components/Add";
Vue.use(Add)

这样处理可以注册到全局。

想问下,注册组件为何用到use方法?用Vue.component不就可以了吗?

回答:

Vue.use(plugin), plugin格式为{install: function () {}},则运行install方法,若plugin本身是function则直接运行。
Vue.component才是真正的去注册组件。
很多UI库用Vue.use来注册组件是因为在plugin的install方法中去执行Vue.component罢了

回答:

Vue.use(plugin)的初始化方法 {install: function () {}}
里面可以一次性注册多个组件。

Vue.component只能一个一个注册。

install可以做更多的事情

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注