【vue】全局组件

单个组件实例化

步骤一，在comonents中书写Footer组件

步骤二，utils/index.js文件(自己建的)中，实例化组件，挂载组件

方法一：针对函数

import Footer from '@/components/Footer.vue'
export default {
    install(Vue,option){
        console.log(option);
        Vue.component('Footer',Footer)
    }
}
1
2
3
4
5
6
7

方法二，针对对象

import Footer from '@/components/footer.vue'
 export default (Vue,option)=>{
     console.log(option);
     Vue.component('Footer',Footer)
     //前面这个Footer就是页面要使用的名字
 }
1
2
3
4
5
6

步骤三，全局组件的注册

//全局组件
import Component  from './utils/index'
Vue.use(Component)
1
2
3

步骤四，页面直接使用

多个全局组件实例化注册

多个组件实例化

import Footer'../index/index.js';
import Topnevfrom '../index/dialog.js';
//数组存放接收的组件名
const components = [
  Footer,
  Topnev,
  Autocomplete,
  Dropdown,
  DropdownMenu,
 }
 //以下两种选一种
//函数形式，自定义组件名
const components = [{namea:'Footer',com:Footer}, {namea:'Topnev',com:Topnev}]
const install=(Vue, option)=> {
      components.forEach(component => {
       	Vue.component(component.namea, component.com);
       });
  }
 //函数形式，默认使用组件里面自己写的name值
const components = [Footer,Topnev]
const install = function(Vue, opts = {}) {
  components.forEach(component => {
    Vue.component(component.name, component);
  });
 };

export default {
    install
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

//对象形式
const components = [Footer,Topnev]
 export default {
   install(Vue, option) {
        components.forEach(component => {
          Vue.component(component.name, component);
        });
      }
 }
1
2
3
4
5
6
7
8
9

再强调一下，component.name用的是组件里面的名字

其他小知识！

【vue】axios请求封装，二次封装