vue引入全局組件和局部組件的區別以及全局注冊公共函數

一，先看看全局組件的引用，就拿最常用的全局的暫無數據來舉例，看看全局的是如何實現的。

Step1,首先在components創建一個公共的目錄，NoDatas目錄里邊包含index.vue和index.js,index.vue用來寫公共的頁面，index.js用來導出這個組件。

<template>
<!-- NoDataWords 可以靈活控制每個頁面顯示的內容  -->
<!-- NoDataHeight 可以靈活控制每個頁面的高度  -->
<!-- 如果你的頁面都是統一的字體，統一的樣式,那就直接在這寫死就好了 -->
    <div class="NoDataAtAll W100"
         :style="{height: NoDataHeight }">{{NoDataWords}}</div>
</template>
<script>
export default {
  // 就是基本的父子組件傳值
  props: ["NoDataHeight", "NoDataWords"],
  data() {
    return {};
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
.NoDataAtAll {
  font-size: 14px;
  color: #909399;
}
</style>

 

Step2: 然后就是在index.js中注冊該組件

import NoDataS from './index.vue'
const noDataLists = {
    install: function(Vue) {
        // 注冊並獲取組件，然后在main.js中引用，在Vue.use()就可以了
        Vue.component('noDataLists', NoDataS)
    }
}
export default noDataLists

 

steps3:在main.js中引入並使用該組件

import noDataLists from '@/components/NoDatas/index'
Vue.use(noDataLists);

 

至此，就可以完美的使用了。

第二種 全局注冊組件形式

先在main.js里這樣寫。  然后在App.vue里面 的template模板里 直接使用  <users></users>加載使用即可

 

4.2局部組件引入方法 就是在App.vue里引入。

2,.全局注冊公共的函數
公共函數common.js

const obj={
    fun1(){
    },
    fun2(){
    },
    fun3(){
    }
}
export default obj

 

main.js中引入方法

import common from '.icommon.js'
Vue.prototype.common=comm

 

其它組件中調用該方法的時候

this.common.fun1();