vue添加全局的方法、組件、過濾器、和自定義指令等

1. 先來講一說export， export default，module.exports的區別和使用

他們都是成對使用的，不能亂用：

（1）module.exports 和 exports對應的是require：是屬於CommonJS模塊規範。

• module.exports導出以下：
  

// 在fun.js 寫入
    const arr = [1, 2, 3]
    module.exports = {
        arr
    }複製代碼

能夠批量導出, fun.js若是有多個module.exports, 只有最後一個生效。若是有其餘的exports, 它們都不會生效

• exports導出以下：
  

// 在fun.js 寫入
 exports.arr = [1, 2, 3]  複製代碼

單個導出，fun.js能夠有多個exports

• 使用CommonJS模塊規範進行導出，在引入時候有兩種方式：一種是：在引入時候可使用{}解構出來，另外一種是：直接引入。以下：
  

let { arr } = require('./fun')     // [1, 2, 3]
let obj = require('./fun')        // { arr: [1, 2, 3] }
複製代碼

（2）export 和 export default，對應的是import：是屬於ES6語法

• 一個文件可使用export導出多個，引入的時候須要使用 {}。以下：
  

// 在fun.js 寫入
   export let arr = [1, 2, 3]
   export let obj = { name: '123' }
// 頁面引用
   import {arr, obj } from './fun'複製代碼

• export default 只能有一個，能夠批量導出，引入的時候不能使用 {} 。文件裏能夠同時存在export 和export default ，而且分別引入的話，都是生效的。以下：
  

// 在fun.js 寫入
     export let arr = [1, 2, 3]
     export let obj = { name: '123' }
     export default {
        age: 12
     }
// 頁面引用
     import {arr, obj } from './fun'    // [1, 2, 3],  { name: '123' }
     import myObj from './test1'        // { age: 12}複製代碼

2. 添加全局方法或屬性

（1）使用Vue.prototype

// 在main.js中寫
 Vue.prototype.getData = (params) => {
     ...
 }複製代碼

（2）使用install + Vue.prototype

// 在你的全局函數文件fun.js中寫
    export default {
      install (Vue) {
        Vue.prototype.getData = () => {
          return { name: 'scout'}
        }
      }
    }
// main.js 引入
   import getData from './fun'
   Vue.use(getData) 複製代碼

Vue.use 會自動阻止屢次註冊相同插件，屆時即便屢次調用也只會註冊一次該插件。以上兩種方式註冊全局方法，實現的原理都是在 Vue.prototype 上添加了一個方法。在任何vue組件裏都能使用 this.getData()         // { name: 'scout'}

何時該使用Vue.use()方式，何時能夠直接掛在prototype上呢，那你就要知道Vue.use() 到底幹了什麼？

Vue規定引入的插件必須是對象或者函數。

• 若是引入的插件是個對象：必須提供install方法，例如： element-ui組件庫 , 須要使用Vue.use()，該方法默認會調用install方法; 
•  若是引入的插件是個函數，不是按照vue規則設計（準確地說不是專門爲VUE服務）裏面沒有install方法，例如:axios函數庫。 那麼就經過添加到vue原型鏈上的方式使用，它會被直接看成install函數執行。

3. 添加全局組件

// 公共vue組件: components文件夾下面的Loading.vue文件：
import LoadingComponent from '@/components/Loading'

export default {
  install (Vue) {
    Vue.component('Loading', LoadingComponent)
  }
}

// 全局組件： public文件夾下面的Loading.js文件。在main.js中引入:
import Loading from "@/public/Loading"
Vue.use(Loading)

// 在vue任何組件上均可以直接使用：<Loading />複製代碼

4. 添加全局過濾器

自定義指令、添加全局方法等 均可以採用此種方式比較方便

// 在public文件夾下的filter.js文件中：
export const isEmpty = (value) => {
  return value || '-'
}
//在main.js中註冊
import * as filters from './filters'

Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

// 在任何組件中均可以使用此過濾器：| 符號左側的是傳參
<template>
    <div>
        <span>{{message | isEmpty}}</span>
    </div>
</template>複製代碼

5. 添加全局自定義指令

自定義指令爲咱們提供了幾個鉤子函數（均爲可選項）：

• bind: 只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數能夠定義一個在綁定時執行一次的初始化動做。
  
• inserted: 被綁定元素插入父節點時調用（僅保證父節點存在，但不必定被插入到DOM）。
  
• update: 被綁定元素所在的模板更新時調用，而不論綁定值是否變化。經過比較更新先後的綁定值，能夠忽略沒必要要的模板更新
  
• componentUpdated: 被綁定元素所在模板完成一次更新週期時調用。
  
• unbind: 只調用一次， 指令與元素解綁時調用。
  

我這裏以inserted爲例，添加一個全局的表格拖拽的自定義指令 v-tableDrag 。此處使用了sortablejs這個函數庫（ps: 這個包的使用方法能夠去npm查看，這裏不作贅述。不用關注這個，主要是看如何進行指令的註冊）。

// 這是directive文件夾下面的 tableDrag.js文件：

import Sortable from 'sortablejs'

export default {
  install (Vue) {
    Vue.directive('tableDrop', {
      inserted (el, binding, vnode) {
        let { value } = binding
        let column = el.querySelector('.ivu-table-header thead tr')
        Sortable.create(column, {
          animation: 200,
          filter: `.ivu-table-header thead tr th:nth-child(${column.childElementCount})`,
          onMove (e) {
            if (e.related.innerText === column.children[`${column.childElementCount - 1}`].innerText) {
              return false
            }
          },
          onEnd (e) {
            // 列表數據的改變
            let { item, oldIndex, newIndex } = e
            let oldItem = value[oldIndex]
            value.splice(oldIndex, 1)
            value.splice(newIndex, 0, oldItem)
            // 表頭的改變
            let fatherNode = item.parentElement
            let flag = fatherNode.children[newIndex]
            fatherNode.removeChild(flag)
            fatherNode.insertBefore(flag, fatherNode.children[oldIndex])
          }
        })
      }
    })
  }
}複製代碼

註冊完後使用：

//在main.js中引入

import tableDrag from '@/directive/tableDrag'

Vue.use(tableDrag)

// 任何組件中均可以使用指令： v-tableDrag    這個指令實現了表格的行，列，均可以進行拖拽複製代碼

其實鉤子函數中經常使用的參數就這三個（詳細參數查看下圖）：

• el：所綁定的元素DOM節點；
• binding: 是一個對象，包含不少值，經常使用的就這麼兩個：name:指令名；value: 綁定的值，如：v-tableDrag='123', value就是123。 
• vnode: Vue編譯生成的虛擬DOM節點。