vue項目mixin.js的使用及注意詳解

簡單的介紹下mixin（混入）：

官方介紹：混入 (mixin) 提供了一種非常靈活的方式，來分發 Vue 組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項。

注意：

1. 當組件和混入對象含有同名選項時，這些選項將以恰當的方式在Vue.extend() 里最終選擇使用相同的選項合並邏輯合並，並在發生沖突時以組件數據優先。

2. 同名鈎子函數將合並為一個數組，因此都將被調用。另外，混入對象的鈎子將在組件自身鈎子之前調用。

3. 在使用mixins時，父組件和子組件同時擁有着子組件內的各種屬性方法，但這並不意味着他們同時共享、同時處理這些變量，兩者之間除了合並，是不會進行任何通信的

4. 請謹慎使用全局混入，因為它會影響每個單獨創建的 Vue 實例 (包括第三方組件)。

 

用法：

1. 在utils文件夾下定義mixin.js，記住他可以擁有vue實例的各種屬性和方法：

export default {
    data () {
        return {
            initData: 'mixin初始數據'
        }
    },
    mounted () {
        console.log('minxin的掛載輸出')
    },
    methods: {
        doubleNum(num){
            return num*2
        }
    }
}

2. 在組建中引用mixin

<template>
    <div>
        <h1>{{ name }}</h1>
        <h2>{{ initData }}</h2>
        <h3>{{ num }}</h3>
        <h4>{{ mixinNum }}</h4>
    </div>
</template>

<script> import mixin from '../utils/minxin';
export default {
    mixins: [mixin],
    data () {
        return {
            name: '混入組件',
            num: 10,
            // initData: '組件初始數據',
            mixinNum: this.doubleNum(10)
        }
    },
    mounted () {
        console.log("Hunru組件的掛載輸出");
    },
}
</script>

結果如下圖：