快捷導(dǎo)航

vue中的mixins混入使用方法

更新時(shí)間：2022年04月24日 16:48:53 作者：清城幻影

這篇文章主要介紹了vue中的mixins混入使用方法，混入又分全局混入混入局部混入，下文對(duì)兩者都有相關(guān)介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下

mixins

混合 (mixins) 是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式。
混合對(duì)象可以包含任意組件選項(xiàng)。
當(dāng)組件使用混合對(duì)象時(shí)，所有混合對(duì)象的選項(xiàng)將被混入該組件本身的選項(xiàng)。

mixins理解

組件在引用之后相當(dāng)于在父組件內(nèi)開辟了一塊單獨(dú)的空間，來(lái)根據(jù)父組件props過(guò)來(lái)的值進(jìn)行相應(yīng)的操作，單本質(zhì)上兩者還是涇渭分明，相對(duì)獨(dú)立。

而mixins則是在引入組件之后，則是將組件內(nèi)部的內(nèi)容如data等方法、method等屬性與父組件相應(yīng)內(nèi)容進(jìn)行合并。相當(dāng)于在引入后，父組件的各種屬性方法都被擴(kuò)充了。

單純組件引用：

父組件 + 子組件 >>> 父組件 + 子組件

mixins：

父組件 + 子組件 >>> new父組件有點(diǎn)像注冊(cè)了一個(gè)vue的公共方法，可以綁定在多個(gè)組件或者多個(gè)Vue對(duì)象實(shí)例中使用。另一點(diǎn)，類似于在原型對(duì)象中注冊(cè)方法，實(shí)例對(duì)象即組件或者Vue實(shí)例對(duì)象中，仍然可以定義相同函數(shù)名的方法進(jìn)行覆蓋，有點(diǎn)像子類和父類的感覺(jué)。

作用：

用簡(jiǎn)單的話去概括就是一種分發(fā)vue組件中的功能可以復(fù)用一個(gè)技術(shù)，使用這個(gè)技術(shù)我們可以把需要復(fù)用的內(nèi)容封裝成一個(gè)vue組件，方便下次使用方便

使用方法

首先在src中去創(chuàng)建一個(gè)自己的文件夾，然后把要封裝的內(nèi)容放入到這個(gè)文件夾，方便后續(xù)的調(diào)用

let mymixin={
    methods:{
        handleBtn(){
            alert('封裝的內(nèi)容已經(jīng)觸發(fā)！')
        }
    }
}
export default mymixin

全局混入

全局混入就是我們可以把封裝好的這個(gè)組件在main.js中全局注冊(cè)，方便在任何地方使用

import myMixins from "./mixins/index.js"
// 全局混入
Vue.mixin(myMixins)

局部混入

也就是引用的復(fù)用內(nèi)容只能在當(dāng)前組件中生效

<template>
  <button @click="handleBtn">點(diǎn)我觸發(fā)</button>
</template>
<script>
import myMixins from '@/mixin.js'
export default {
    mixins:[myMixins]
}
</script>
<style>
</style>

這樣就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的混入，減少代碼的復(fù)用性，大大加強(qiáng)了開發(fā)效率，你就可以安心的考慮業(yè)務(wù)，而不是不停的敲代碼

mixins的使用

方法的復(fù)用

html

<div id="app">
    <child></child>
    <kid></kid>
</div>

js

Vue.component('child',{
    template:`<h1 @click="foo">child component</h1>`,
    methods:{
        foo(){
            console.log('Child foo()'+this.msg++)
        }
    }
})
Vue.component('kid',{
    template:`<h1 @click="foo">kid component</h1>`,
    methods:{
        foo(){
            console.log('Kid foo()'+this.msg++)
        }
    }
})

在借助mixins之前，在兩個(gè)不同的組件的組件中調(diào)用foo方法，需要重復(fù)定義，倘若方法比較復(fù)雜，代碼將更加冗余。若借助mixins，則變得十分簡(jiǎn)單：

let mixin={
    data(){
        return{
            msg:1
        }
    },
    methods:{
        foo(){
            console.log('hello from mixin!----'+this.msg++)
        }
    }
}
var child=Vue.component('child',{ 
        template:`<h1 @click="foo">child component</h1>`, 
        mixins:[mixin]
})
Vue.component('kid',{ 
        template:`<h1 @click="foo">kid component</h1>`, 
        mixins:[mixin]
})

雖然此處，兩個(gè)組件用可以通過(guò)this.msg引用mixins中定義的msg，但是，小編嘗試過(guò)，兩個(gè)組件引用的并不是同一個(gè)msg，而是各自創(chuàng)建了一個(gè)新的msg。如果在組件中定義相同的data，則此處會(huì)引用組件中的msg，而非mixins中的。

方法的覆蓋

如果在引用mixins的同時(shí)，在組件中重復(fù)定義相同的方法，則mixins中的方法會(huì)被覆蓋。

var child=Vue.component('child',{
    template:`<h1 @click="foo">child component</h1>`,
    mixins:[mixin],
    methods:{
        foo(){
            console.log('Child foo()'+this.msg++)
        }
    }
})

此時(shí)，若單擊h1標(biāo)簽，則在控制臺(tái)中打印"Child foo() 1" 3、合并生命周期此時(shí)，若單擊h1標(biāo)簽，則在控制臺(tái)中打印"Child foo() 1"

合并生命周期

let mixin={
    mounted(){
        console.log('mixin say hi')//先輸出
    },
    data(){
        return{
            msg:1
        }
    },
    methods:{
        foo(){
            console.log('mixin foo()'+this.msg++)
        }
    }
}
let vm=new Vue({
    el:"#app",
    data:{
        msg: 2
    },
    mounted: function(){
        console.log('app say hi')//后輸出
    },
    methods:{
        foo(){
            console.log('Parent foo()'+this.msg)
        }
    }
})

通過(guò)上面的介紹，現(xiàn)在對(duì)mixins有了比較深入的了解，在設(shè)計(jì)復(fù)雜組件時(shí)是很有必要的。

到此這篇關(guān)于vue中的mixins混入使用方法的文章就介紹到這了,更多相關(guān)vue中的mixins內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: