關(guān)于vue混入(mixin)的解讀

更新時(shí)間：2022年10月18日 08:35:14 作者：小鐵匠95

這篇文章主要介紹了關(guān)于vue混入(mixin)的解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue混入(mixin)的解讀

混入(mixin)提供了一種非常靈活的方式，來(lái)分發(fā)vue組件中的可復(fù)用功能。一個(gè)混入對(duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)。

1.鉤子函數(shù)

混入對(duì)象的鉤子將在組件自身鉤子之前調(diào)用。

?// ?minxin.js
const mixin = {
? data() {
? ? return{
? ? ? msg1: '我是混入內(nèi)容1',
? ? ? msg2: '我是混入內(nèi)容2'
? ? }
? },
? created() {
? ? console.log(this.msg3)
? }
}
export default mixin;
</script>
...
// 頁(yè)面組件
<template>
? <div class="header">
? ? <h1></h1>
? </div>
</template>
<script>
import mixin from './mixins/mixin'
export default {
? mixins: [mixin],
? name: 'Header',
? data(){
? ? return{
? ? ? msg1: '我是組件內(nèi)容1',
? ? ? msg3: '我是組件內(nèi)容2'
? ? }
? },
? created() {
? ? ? console.log(this.msg2)
? ? ? console.log(this.msg1)
? },
}
</script>
??
?? ?// 我是組件內(nèi)容2
?? ?// 我是混入內(nèi)容2
?? ?// 我是組件內(nèi)容1

2.普通方法合并

當(dāng)混合值為對(duì)象的選項(xiàng)時(shí)，例如 methods、components、directive，將被混合為同一個(gè)對(duì)象，兩個(gè)對(duì)象鍵名沖突時(shí)，取組件對(duì)象的鍵值對(duì)。

<body>
? ? <div id="app"></div>
</body>
<script src="./vue.js"></script>
<script>
? ? var Mixins = {
? ? ? ? methods: {
? ? ? ? ? ? mixin: function() {
? ? ? ? ? ? ? ? console.log('MixinOne')
? ? ? ? ? ? },
? ? ? ? ? ? mixinTwo: function () {
? ? ? ? ? ? ? ? console.log('MixinTwo')
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? new Vue({
? ? ? ? el: '#app',
? ? ? ? mixins: [Mixins],
? ? ? ? methods: {
? ? ? ? ? ? mixin: function () {
? ? ? ? ? ? ? ? console.log('component')
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? mounted() {
? ? ? ? ? ? this.mixin()
? ? ? ? ? ? this.mixinTwo()
? ? ? ? }
? ? })
? ??
?? ?// component
?? ?// MixinTwo
</script>

3.局部混入

在componnets目錄下新建mixins文件夾，并在mixins目錄下創(chuàng)建一個(gè)mixin.js文件，代碼如下：

const mixin = {
? data() {
? ? return {
? ? ? msg: "hello"
? ? }
? },
? methods: {
? ? mixinMethod() {
? ? ? console.log(this.msg + ',這是mixin混入方法')
? ? }
? }
}
export default mixin;

在需要的頁(yè)面中引入：

<template>
?? ?<div>{{msg}}</div>
</template>
<script>
import mixin from '../mixins/mixin'
export default {
?? ?mixins: [mixin],
? ? data() {
?? ? ? ?return {
?? ? ? ?}
? ? }
?? ?mounted() {
?? ??? ?this.mixinMethod()
?? ?}
}
// hello，這是mixin混入的方法

4.全局混入

在main.js加入以下代碼

Vue.mixin({
? data() {
? ? return {
? ? ? msg: 'hello'
? ? }
? },
? methods: {
? ? mixinMethod() {
? ? ? console.log(this.msg+'，這是mixin混入的方法')
? ? }
? }
})

在組件中直接引用：

<template>
?? ?<div>{{msg}}</div>
</template>
<script>
export default {
? ? data() {
?? ? ? ?return {
?? ? ? ?}
? ? }
?? ?mounted() {
?? ??? ?this.mixinMethod()
?? ?}
}
// hello，這是mixin混入的方法
</script>