如何在vue中注册全局组件

对于一些基础的组件,比如输入框,下拉选择框,使用的频率很高。我们没有必要在每一个需要的地方使用。而是采取在根组件中注册。根组件中的注册是全局注册。全局注册了之后就可以在根组件下的任何子组件中使用。

根组件代码如下:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import plugins from './components/common/index'

//注意必须在构建Vue实例之前就将需要的组件注册进去
Vue.use(plugins);

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

plugins函数的代码:

import ComponentA from "./ComponentA";
import ComponentB from "./ComponentB";
import ComponentC from "./ComponentC";

function plugins(Vue) {
  Vue.component("componen-a", ComponentA);
  Vue.component("componen-b", ComponentB);
  Vue.component("componen-c", ComponentC);
}

export default plugins;

ComponentA,ComponentB,ComponentC组件很简单,逻辑完全一样,以ComponentA为例:

<template>
  <div>this is component a</div>
</template>

<script>
export default {
  name: "component-a"
}
</script>

<style>

</style>

之后就可以在根组件下的任何组件中使用ComponentA,ComponentB,ComponentC。
以HelloWorld组件为例:

<template>
  <div class="hello">
    <componen-a></componen-a>
    <componen-b></componen-b>
    <componen-c></componen-c>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

注意在引入ComponentA组件的时候,我们引入的方式是<componen-a>,这和之前定义是相互呼应的:
Vue.component(“componen-a”, ComponentA);

这里最核心的是Vue.use(plugins);这段代码到底都干了什么?

function plugins(Vue) {
  Vue.component("componen-a", ComponentA);
  Vue.component("componen-b", ComponentB);
  Vue.component("componen-c", ComponentC);
}

方法plugins接受一个参数Vue,这个参数是从哪里来的。这一切都藏在Vue.use这个方法属性当中。
Vue.use采取来什么样的设计模块。这是下一篇需要关注的问题。

    原文作者:洛神赋
    原文地址: https://segmentfault.com/a/1190000019903495
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞