在vue項目開發中使用 【Mixin】

1、認識mixin

mixin 混入。
官方解釋：混入 (mixin) 提供了一種很是靈活的方式，來分發 Vue 組件中的可複用功能。一個混入對象能夠包含任意組件選項。當組件使用混入對象時，全部混入對象的選項將被「混合」進入該組件自己的選項。

官方文檔

2、使用方法

1. 第一步新建js文件

新建mixin.js

const myMixin = {
  created: function () {
    
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}
export default myMixin;
複製代碼

2. 第2步 引入(局部)

在須要用到mixin的組件里加上

3. 第3步 引入(全局) 在main.js加上

   

4. 引入是否是很簡單 接下來就能夠使用mixin.js裏面的方法&屬性了。

注意：當 mixin.js裏面的屬性或者方法跟組件裏屬性或者方法相沖突，會被組件裏的屬性或者方法覆蓋。

使用全局mixin時須要注意。
官方解釋：請謹慎使用全局混入，由於它會影響每一個單首創建的 Vue 實例 (包括第三方組件)。大多數狀況下，只應當應用於自定義選項，就像上面示例同樣。推薦將其做爲插件發佈，以免重複應用混入。