關于vue混入(mixin)的解讀

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

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

vue混入(mixin)的解讀

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

1.鉤子函數

混入對象的鉤子將在組件自身鉤子之前調用。

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

2.普通方法合并

當混合值為對象的選項時，例如 methods、components、directive，將被混合為同一個對象，兩個對象鍵名沖突時，取組件對象的鍵值對。

<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)建一個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混入的方法

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>