如何在vue中注册全局组件

2024年2月5日 193次阅读 来源: 洛神赋

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

根组件代码如下：

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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞