vue?cli?局部混入mixin和全局混入mixin的過程

更新時間：2022年05月24日 10:42:39 作者：每一天，每一步

這篇文章主要介紹了vue?cli?局部混入mixin和全局混入mixin的過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

局部混入mixin和全局混入mixin

應(yīng)用場景

兩個組件，都需要用到同一個點擊事件方法，此時使用mixin混入，可以很好的實現(xiàn)代碼的復(fù)用。

在vue cli搭建的項目中，src目錄下新建mixin.js文件：

// 對外暴露mixin對象
export const mixin = {
  data() {
    return {
      msg: 'hello'
    }
  },
  methods: {
    click() {
      alert('你點我了')
    }
  }
}
 
export const mixin2 = {
  mounted() {
    console.log('mounted');
  }
}

App.vue中引入兩個組件Student和School：

<template>
? <div>
? ? <School></School>
? ? <Student></Student>
? </div>
</template>

<script>
import School from './components/School'
import Student from './components/Student'
export default {
? name: 'App',
? components: {
? ? School,
? ? Student
? }
}
</script>
?
<style>
</style>

1、局部混入mixin

Student和School兩個組件中點擊第一行的文字會彈出提示：‘你點我了’，組件中分別引入mixin混入，

Student.vue:

<template>
  <div>
    <p @click="click">學(xué)生姓名：{{name}}</p>
    <p>學(xué)生年齡：{{age}}</p>
  </div>
</template>

<script>
import {mixin} from '../mixin'
export default {
  name: 'Student',
  data() {
    return {
      name: 'Tom',
      age: 18
    }
  },
  mixins: [mixin]
}
</script>
 
<style>
</style>

School.vue:

<template>
  <div>
    <p @click="click">學(xué)校名稱：{{name}}</p>
    <p>學(xué)校地址：{{address}}</p>
  </div>
</template>

<script>
import {mixin} from '../mixin'
export default {
  name: 'Student',
  data() {
    return {
      name: 'zz',
      address: 'bj'
    }
  },
  mixins: [mixin]
}
</script>
 
<style>
</style>

2、全局混入mixin

在main.js中引入暴露的mixin對象：

import {mixin} from './mixin'
// 引入多個mixin
import {mixin, mixin2} from './mixin'
 
// 全局混入
Vue.mixin(mixin)
 
// Vue.mixin(mixin2)

頁面效果：

mixin對象中的msg也會混入到Vue實例和組件中。

如果想要同時引入兩個混入，則使用下面的引入方式多引入一個變量即可：

import {mixin, mixin2} from '../mixin'

如果組件和混入mixin中同時有鉤子函數(shù)如mounted，則均會執(zhí)行。

mixins的使用方法和注意點

混入 (mixins)：是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式?；烊雽ο罂梢园我饨M件選項。

1. 把Mixin混入到當(dāng)前的組件中，方法和參數(shù)在各組件中不共享

export const myMixin = {
    data() {
        return {
            number: 1,
            data: {
                str: 'hello world'
            }
        }
    },
}

在模版Admin，和Docs中

<template>
? <span>Admin: {{number}} {{data.str}}</span>
</template>
<script>
import {myMixin} from '../mixin/mixin';
export default {
? ? mixins: [myMixin],
? ? created() {
? ? ? ? this.number ++;
? ? ? ? this.data.str = '=========== i am a new str'
? ? }
}
</script>
<template>
? <span>Docs {{number}} {{data.aa}}</span>
</template>
<script>
import {myMixin} from '../mixin/mixin';
export default {
? ? mixins: [myMixin]
}
</script>

頁面顯示, admin顯示的最新修改的number和str值，而Docs中顯示的是mixin默認(rèn)值，并沒有被修改

在這里插入圖片描述

所以我們得出結(jié)論，mixin中data的值各個組件中不共享。

2. 值作為對象，如methods， components等，選項會被合并。如果有沖突則組件覆蓋mixin中對象

例如mixin中定義method

export const myMixin = {
    data() {
        return {
            number: 1,
            data: {
                str: 'hello world'
            }
        }
    },
    methods: {
        one() {
            console.log('============ one');
        },
        two() {
            console.log('============ two');
        }
    }
}

Mixin在Admin 和 Docs 模版中，分別調(diào)用，如下

// Admin
<template>
  <span>Admin: {{number}} {{data.str}}</span>
</template>
<script>
import {myMixin} from '../mixin/mixin';
export default {
    mixins: [myMixin],
    created() {
        this.self();
        this.one();
        this.two();
    },
    methods: {
        self() {
            console.log('============ admin self');
        },
        two() {
            console.log('============ admin func_two');
        }
    }
}
</script>
// Docs
<template>
  <span>Docs {{number}} {{data.str}}</span>
</template>
<script>
import {myMixin} from '../mixin/mixin';
export default {
    mixins: [myMixin],
    created() {
        this.one();
        this.two();
    },
}
</script>

在控制臺打印結(jié)果如下

// Admin

在這里插入圖片描述

// Docs

在這里插入圖片描述

我們可以看到admin 中方法 function two與 Mixin 中function two，名稱是相同的，所以在相同發(fā)生沖突的時候，組件的方法將會覆蓋Mixin中的方法。

3. 值為函數(shù)的選項，如created,mounted等，就會被合并調(diào)用，Mixin里的hook函數(shù)在組件里的hook函數(shù)之前調(diào)用

比如在Mixin中定義

export const myMixin = {
    data() {
        return {
            number: 1,
            data: {
                str: 'hello world'
            }
        }
    },
    created() {
    	console.log('============= mixin created');
        this.hello();
    },
    methods: {
        hello() {
            console.log('============== hello');
        },
        one() {
            console.log('============ one');
        },
        two() {
            console.log('============ two');
        }
    }
}

在Admin 和Docs中應(yīng)用

// Admin
<template>
  <span>Admin: {{number}} {{data.str}}</span>
</template>
<script>
import {myMixin} from '../mixin/mixin';
export default {
    mixins: [myMixin],
    created() {
        console.log('========== admin created');
        this.number ++;
        this.data.str = '=========== i am a new str'
        this.self();
        this.one();
        this.two();
    },
    methods: {
        self() {
            console.log('============ admin self');
        },
        two() {
            console.log('============ admin func_two');
        }
    }
}
</script>
// Docs
<template>
  <span>Docs {{number}} {{data.str}}</span>
</template>
<script>
import {myMixin} from '../mixin/mixin';
export default {
    mixins: [myMixin],
    created() {
         console.log('========== docs created');
        this.one();
        this.two();
    },
}
</script>

我們在控制臺可以看到

Admin.vue 是先調(diào)用Mixin中create及方法，在調(diào)用Admin中Create中方法的

在這里插入圖片描述