Vue3.x中的mixin介紹使用

混入 (mixin) 提供了一種非常靈活的方式，來分發 Vue 元件中的可複用功能。一個混入物件可以包含任意元件選項。當元件使用混入物件時，所有混入物件的選項將被“混合”進入該元件本身的選項。

1、新建mixin/base.js

const baseMixin = {
    data() {
       return{
            apiDomain: "http://www.itying.com"
       }
       
    },
    methods: {
        success() {
            console.log('succss')
        },
        error() {
            console.error('error')
        }
    }
}

export default baseMixin;
 

2、使用mixin

<template>
<div>
    首頁模板--{{apiDomain}}
</div>
</template>

<script>
import BaseMixin from '../mixin/base'
export default {
    mixins: [BaseMixin],
    data() {
        return {

        }
    }
}
</script>

二、關於Mixin的選項合併

當元件和混入物件含有同名選項時，這些選項將以恰當的方式進行“合併”。

1、比如，資料物件在內部會進行遞迴合併，並在發生衝突時以元件資料優先。

const myMixin = {
  data() {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

const app = Vue.createApp({
  mixins: [myMixin],
  data() {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created() {
    console.log(this.$data) // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})
 

2、同名鉤子函式將合併為一個數組，因此都將被呼叫。另外，混入物件的鉤子將在元件自身鉤子之前呼叫。

const myMixin = {
  created() {
    console.log('mixin hook called')
  }
}

const app = Vue.createApp({
  mixins: [myMixin],
  created() {
    console.log('component hook called')
  }
})

// => "混入物件的鉤子被呼叫"
// => "元件鉤子被呼叫"

3、值為物件的選項，例如 methods、components，將被合併為同一個物件。兩個物件鍵名衝突時，取元件物件的鍵值對。

const myMixin = {
  methods: {
    foo() {
      console.log('foo')
    },
    conflicting() {
      console.log('from mixin')
    }
  }
}

const app = Vue.createApp({
  mixins: [myMixin],
  methods: {
    bar() {
      console.log('bar')
    },
    conflicting() {
      console.log('from self')
    }
  }
})

const vm = app.mount('#mixins-basic')

vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

三、全域性配置Mixin

你還可以為 Vue 應用程式全域性應用 mixin

const app = Vue.createApp({
  myOption: 'hello!'
})

// 為自定義的選項 'myOption' 注入一個處理器。
app.mixin({
  created() {
    const myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

app.mount('#mixins-global') // => "hello!"

import { createApp } from 'vue'
import App from './App.vue'
import BaseMixin from './mixin/base'

//原來的程式碼
// createApp(App).mount('#app')

//修改後的程式碼
const app=createApp(App);

app.mixin(BaseMixin)

app.mount('#app');