vue混入(mixin)的詳解
阿新 • • 發佈：2022-03-23
混入(mixin)提供了一種非常靈活的方式，來分發vue元件中的可複用功能。一個混入物件可以包含任意元件選項。當元件使用混入物件時，所有混入物件的選項將被“混合”進入該元件本身的選項。
1.鉤子函式
同名鉤子函式將會混合為一個數組，都將被呼叫到，但是混入物件的鉤子將在元件自身鉤子之前呼叫。
var mixin = { created: function () { console.log('混入物件的鉤子被呼叫') } } new Vue({ mixins: [mixin], created: function () { console.log('元件鉤子被呼叫') } }) // => "混入物件的鉤子被呼叫" // => "元件鉤子被呼叫"
2.資料物件合併
<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>
3.普通方法合併
當混合值為物件的選項時，例如 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>
4.區域性混入
在componnets目錄下新建mixins資料夾，並在mixins目錄下建立一個mixin.js檔案，程式碼如下：
const mixin = {
data() {
return {
msg: "hello"
}
},
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()
}
}
// hello，這是mixin混入的方法
5.全域性混入
在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>