簡介
混入 (mixins) 是一種分發 Vue 組件中可復用功能的非常靈活的方式。混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被混入該組件本身的選項。
鈎子函數合並
同名鈎子函數將混合為一個數組，因此都將被調用。另外，混入對象的鈎子函數將在組件自身鈎子函數之前調用
<body> <div id="app"></div> </body> </html> <script src="./vue.js"></script> <script> var Mixins = { created() { console.log('Mixins Created') } } new Vue({ el: '#app', mixins: [Mixins], created() { console.log('#app Created') } }) // Mixins Created // #app Created </script>
數據對象合並
數據對象在內部會進行淺合並 (一層屬性深度)，在和組件的數據發生沖突時以組件數據優先（組件的data中變量會覆蓋混入對象的data中變量）
<body> <div id="app"></div> </body> <script src="./vue.js"></script> <script> var Mixins = { data: { msg: 'I am Mixins', msg1: 'I am Mixins msg1' }, created() { console.log('我是組件中的變量：' + this.msg2) } } new Vue({ mixins: [Mixins], el: '#app', data: { msg: 'I am #app', msg2: 'I am msg2' }, created() { console.log(this.msg) console.log('我是混入對象中的變量：' + this.msg1) } }) // 我是組件中的變量：I am msg2 // I am #app // 我是混入對象中的變量：I am Mixins msg1 </script>
普通方法合並
當混合值為對象的選項時，例如 methods、components、directive，將被混合為同一個對象，兩個對象鍵名沖突時，取組件對象的鍵值對
<body> <div id="app"></div> </body> <script src="./vue.js"></script> <script> var Mixins = { methods: { mixin: function() { console.log('Mixin') }, mixinTwo: function () { console.log('MixinTwo') } } } new Vue({ el: '#app', mixins: [Mixins], methods: { mixin: function () { console.log('#app') } }, mounted() { this.mixin() this.mixinTwo() } }) // #app // MixinTwo </script>
局部混入
在 components 目錄下創建一個mixins文件夾，並在 mixins 目錄下創建一個 mixin.js 文件
在這里插入圖片描述
在 mixin.js 文件里寫入如下代碼
const mixin = {
data() {
return {
msg: '哈哈'
}
},
methods: {
mixinMethod() {
console.log(this.msg+'，這是mixin混入的方法')
}
}
}
export default mixin
在需要的頁面引入並使用
<template> <div>{{msg}}</div> </template> <script> import mixin from '../mixins/mixin' export default { mixins: [mixin], data() { return { } } mounted() { this.mixinMethod() } } // 哈哈，這是mixin混入的方法
全局混入
1. 在 HTML 中全局混入
一旦使用全局混入對象，將會影響到所有之后創建的 Vue 實例
<body> <div id="app"></div> </body> </html> <script src="./vue.js"></script> <script> Vue.mixin({ methods: { mixinOne: function() { console.log('mixinOne') } } }) new Vue({ el: '#app', methods: { mixinTwo: function () { console.log('mixinTwo') } }, mounted() { this.mixinOne() this.mixinTwo() } }) // mixinOne // mixinTwo </script>
2. 在 Vue 項目中全局混入
在 main.js 中寫入如下代碼 import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false Vue.mixin({ data() { return { msg: '哈哈' } }, methods: { mixinMethod() { console.log(this.msg+'，這是mixin混入的方法') } } }) /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) 在組件中直接使用 <template> <div>{{msg}}</div> </template> <script> export default { data() { return { } } mounted() { this.mixinMethod() } } // 哈哈，這是mixin混入的方法 </script>
————————————————
版權聲明：本文為CSDN博主「凡_夫」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/fu983531588/article/details/90680873