vue混入mixin的使用，保證你看的明明白白！

場景描述

有些時候，我們發現有些組件部分功能代碼是幾乎是一樣的。
這個時候，我們就可以將相同的邏輯代碼抽離出來
此時我們的主角混入mixin就登場了
下面我們有a-test和b-test兩個組件，點擊按鈕發生的邏輯是一樣的。
這個時候我們就可以使用混入mixin

a-test代碼如下

<template>
    <div>
        <el-button  @click="openHander">點我呀</el-button>
        <h2 >我是a-test組件</h2>
        <h2>學校： {{ name}}</h2>
        <h2> 地址： {{ sex}}</h2>
        ============================
    </div>
</template>

<script>
import { mixinmethods} from "../mixin.js"
export default {
    data(){
        return {
            name:'xxx科技大學',
            sex:'四川'
        }
    },
    // methods:{
    //     openHander(){
    //         // 做了一些事情，因為跟b-test組件的功能相同，所以我們使用混入來解決
    //     }
    // }
    // mixins是固定的，里面傳入一個數組
    mixins:[mixinmethods]
}
</script>

b-test組件代碼如下

<template>
    <div>
        <el-button  @click="openHander">點我呀</el-button>
        <h2>我是b-test組件</h2>
        <h2> 學生姓名： {{ name}}</h2>
        <h2> 學生性別： {{ sex}}</h2>
    </div>
</template>

<script>
import { mixinmethods} from "../mixin.js"
    export default {
        data(){
            return {
                name:'李四',
                sex:'男'
            }
        },
        // methods:{
        //     openHander(){
        //         // 做了一些事情，因為跟a-test組件的功能相同，所以我們使用混入來解決
        //     }
        // }

        // mixins是固定的，里面傳入一個數組
        mixins:[mixinmethods]
    }
</script>

mixin.js代碼

export const mixinmethods = {
    // mixinmethods這個值隨便你取
    methods:{
        openHander(){
            // mixin其實就是想將相同的模塊抽離出去
            alert('混合')
            // 可分別拿到組件中的數據
            console.log(this.name);
        }
    }
}

在mixin中寫聲明周期

export const mixinmethods = {
    // mixinmethods這個值隨便你取
    methods:{
        openHander(){
            // mixin其實就是想將相同的模塊抽離出去
            alert('混合')
            // 可分別拿到組件中的數據
            console.log(this.name);
        }
    },
    // 因為這個混合在兩個組件中使用，那么該聲明周期就會被執行兩次
    mounted() {
        console.log("我是混合中的生命周期")
    }
}

如果混合中的數據與組件中data的數據重復，會保留data中的數據

如果組件中data數據與混合中的數據重復了，
使用data中的數據。
組件中是可以直接使用混合中的數據的。
需要注意的是：聲明周期不會以誰的為主
如果你在混合總共使用了生命周期，聲明周期可能是都會執行。不會以誰的為主

export const mixinmethods = {
    data() {
        return {
            name:'lh',
            sex: '男',
            age:24
        }
    },
    // mixinmethods這個值隨便你取
    methods:{
        openHander(){
            // mixin其實就是想將相同的模塊抽離出去
            alert('混合')
            // 可分別拿到組件中的數據
            console.log(this.name);
        }
    },
    // 因為這個混合在兩個組件中使用，那么該聲明周期就會被執行兩次
    mounted() {
        console.log("我是混合中的生命周期")
    }
}

<template>
    <div>
        <el-button @click="openHander">點我呀</el-button>
        <h2 >我是a-test組件</h2>
        <h2 >學校： {{ name}}</h2>
        <h2> 地址： {{ sex}}</h2>
        <h2> 年齡是混合中的數據 {{ age}}</h2>

        ============================
    </div>
</template>

<script>
import { mixinmethods} from "../mixin.js"
export default {
    data(){
        return {
            name:'xxx科技大學',
            sex:'四川'
        }
    },
    // mixins是固定的，里面傳入一個數組
    mixins:[mixinmethods]
}
</script>

全局混合

在main.js中全局引入，
這樣vc,vm都可以得到[這樣雖然是全局使用,但是會造成性能浪費]

import {yourkey1,yourkey2}  from "./mixn"
Vue.mixin(yourkey1)
Vue.mixin(yourkey2)

這樣你就可以不需要在組件中引入了。直接在組件中使用混合就行
組件中使用 mixins:[yourkey1]