[TOC] ### 一、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'); ~~~