淺析vue混入(mixin)

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

這句話咱們能夠理解爲在js代碼中定義一個混入對象，裏面能夠包含一個組件能夠有的任何組件選項:data、method、watch、鉤子函數等，使用的話，分爲局部混入和全局混入。

首先新建一個mixin.js文件，添加如下代碼。

// 混入
export default {
    data() {
        return {
            msg: "Hello Word!"
        };
    },
    created() {},
    computed: {},
    methods: {
        show() {
            console.log(this.msg);
        }
    }
};

這個文件格式應該比較眼熟，一個.vue文件包含template、script、style三個部分，mixin.js這個文件很像script這個部分。對的，script裏的data、method、watch、鉤子函數等，均可以定義到mixin.js這個文件。那這裏面可能就會存在問題，好比mixin.js中的data、method等和引用混入的組件中存在衝突，這時採用組件內部優先。

局部混入

<template>
  <div id="myVue">
    <span @click="show">{{msg}}</span>
  </div>
</template>
<script>
import myMixin from "./mixin.js";
export default {
  name: "myVue",
  mixins: [myMixin],
  created() {
    console.log("組件自身的鉤子函數");
  },
};
</script>

首先咱們引入mixin.js，而後就能夠調用混入的方法和數據

全局混入

在main.js中引入該文件並使用mixin方法進行註冊

import Vue from 'vue';
import App from './App';

// 增長混入
import myMixin from "@/mixin";
Vue.mixin(myMixin);

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
});

全局註冊後，在任意組件均可以使用，謹慎使用全局混入對象，由於會影響到每一個單首創建的 Vue 實例 (包括第三方模板)。