Vue自定义全局组件

一、首先，我们先准备一下；

 

 

二、webpack首先会加载main.js，所以我们在main的js里面引入：

import Vue from 'vue'
import App from './App.vue'
// 导入  接收路由
import router from './router/router'
// 导入  store
import store from './store/index'
// 引入  echarts
import echarts from 'echarts'
// 导入  element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

// 引入全局公用css
import './style/common.css'
// 引入自定义组件。index.js是组件的默认入口    
import Loading from '@/components/loading'   // 到达文件夹的位置即可，不用精确到具体的文件
Vue.use(Loading);


// 将echarts挂载到vue的原型上
Vue.prototype.$echarts = echarts

Vue.config.productionTip = false



new Vue({
  router,  //挂载到vue实例上
  store,
  render: h => h(App)
}).$mount('#app')

三、然后在Loading.vue里面定义自己的组件模板：

<template>
  <div>
    {{this.tableData.name}}
    {{this.tableData.age}}
  </div>
</template>
<script>
export default {
  props: {
    tableData:{
      type: Object,
    }
  },
  data() {
    return {
      
    }
  },
}
</script>

<style lang="less">
  
</style>

四、在index.js文件里面添加install方法：

import MyLoading from './Loading.vue'
const Loading = {
  install: function(Vue) {
    Vue.component('Loading', MyLoading);
  }
};

// 导出组件
export default Loading;

 

 

 当使用时，在你的父组件内添加：

<Loading :tableData="tableData"></Loading>

就可以在父组件内显示你子组件的内容了：

 

 

为了使代码更方便维护，可以在新建一个公用文件assets/js/commonUse.js，将刚刚引入在main.js的代码放在这个文件里面:

 

 commonUse.js：

import Vue from 'vue';

// 引入自定义组件。index.js是组件的默认入口    
import Loading from '@/components/loading'   // 到达文件夹的位置即可，不用精确到具体的文件
Vue.use(Loading);

import Test from '@/components/test'   
Vue.use(Test);

最后在main.js内引入：

// 引入全局公用组件
import './assets/js/commonUse'

即可。