对于一些基础的组件,比如输入框,下拉选择框,使用的频率很高。我们没有必要在每一个需要的地方使用。而是采取在根组件中注册。根组件中的注册是全局注册。全局注册了之后就可以在根组件下的任何子组件中使用。
根组件代码如下:
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采取来什么样的设计模块。这是下一篇需要关注的问题。