南通企业网站排名优化/it培训班真的有用吗

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

根组件代码如下：

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为例：

export default {

name: "component-a"

}

之后就可以在根组件下的任何组件中使用ComponentA，ComponentB，ComponentC。

以HelloWorld组件为例：

export default {

name: 'HelloWorld',

props: {

msg: String

}

}

注意在引入ComponentA组件的时候，我们引入的方式是，这和之前定义是相互呼应的：

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采取来什么样的设计模块。这是下一篇需要关注的问题。