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

南風晚來晚相識發表於2021-10-29
Vue

場景描述

有些時候，我們發現有些元件部分功能程式碼是幾乎是一樣的。
這個時候，我們就可以將相同的邏輯程式碼抽離出來
此時我們的主角混入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]

相關文章