4.20

yblll發表於2024-06-18

Vue中mixins的使用方法詳解

vue中mixins的使用方法

官方解釋：

混入 (mixins)： 是一種分發 Vue 元件中可複用功能的非常靈活的方式。混入物件可以包含任意元件選項。當元件使用混入物件時，所有混入物件的選項將被混入該元件本身的選項。

舉個例子：

定義一個混入物件：

解釋
export default {
    data(){
        return{
            num:1,
        }
    },
    created() {
        this.hello()
    },
    methods: {
        hello(){
            console.log('hello from mixin')
        },
    },
}

把混入物件混入到當前的元件中

解釋
<template>
  <div>
    <h1>使用mixins</h1>
    <div>元件1</div>
  </div>
</template>
​
<script>
import myMixins from "@/mixins/myMinixn";
export default {
  mixins: [myMixins],
  computed: {},
  created(){
  },
  methods: {},
};
</script>
<style>
</style>

mixins的特點:

1.方法和引數在各元件中不共享，雖然元件呼叫了mixins並將其屬性合併到自身元件中來了，但是其屬性只會被當前元件所識別並不會被共享，也就是其他元件無法從當前元件中獲取到mixins中的資料和方法。

混合物件中的引數num

解釋
export default {
    data(){
        return{
            num:1,
        }
    },
    created() {
        this.hello()
    },
    methods: {
        hello(){
            console.log('hello from mixin')
        },
    },
}

元件1中的引數num進行+1的操作

解釋
<template>
  <div>
    <div>元件1裡的num：{{num}}</div>
  </div>
</template>
​
<script>
import myMixins from "@/mixins/myMinixn";
export default {
  mixins: [myMixins],
  computed: {},
  created(){
    this.num++
  },
  methods: {},
};
</script>
<style>
</style>

元件2中的引數num未進行操作

解釋
<template>
  <div>
    <div>
      元件2裡的num:{{num}}
    </div>
  </div>
</template>
​
<script>
import myMixins from "@/mixins/myMinixn";
export default {
  data() {
    return {};
  },
  mixins: [myMixins],
  methods: {},
};
</script>
​
<style>
</style>
​

輸出結果為：元件1裡的num：2

元件2裡的num:1

元件1裡改變了num裡面的值，元件2中的num值還是混入物件裡的初始值。

2.值為物件的選項，如methods,components等，選項會被合併，鍵衝突的元件會覆蓋混入物件的

混入物件中的方法

解釋
export default {
    data(){
        return{
            num:1,
        }
    },
    created() {
        this.hello()
    },
    methods: {
        hello(){
            console.log('hello from mixin')
        },
        fun_one(){
            console.log('fun_one from mixin');
        },
        fun_two(){
            console.log('fun_two from mixin');
        }
    },
}

元件中的方法

解釋
<template>
  <div>
    <div>元件1裡的num：{{num}}</div>
  </div>
</template>

<script>
import myMixins from "@/mixins/myMinixn";
export default {
  mixins: [myMixins],
  computed: {},
  created() {
    this.fun_self();
    this.fun_one();
    this.fun_two();
  },
  methods: {
    fun_self() {
      console.log("fun_self from template1");
    },
    fun_two() {
      console.log("fun_two from template1");
    },
  },
};
</script>
<style>
</style>

列印臺的輸出

1630649546(1).jpg

3 值為函式的選項，如created,mounted等，就會被合併呼叫，混合物件裡的鉤子函式在元件裡的鉤子函式之前呼叫

混入物件函式中的console

解釋
export default {
    data(){
        return{
            num:1,
        }
    },
    created() {
        console.log('hello from mixin');
    },
}

元件函式中的console

解釋
<template>
  <div>
    <div>元件1裡的num：{{num}}</div>
  </div>
</template>

<script>
import myMixins from "@/mixins/myMinixn";
export default {
  mixins: [myMixins],
  computed: {},
  created() {
   console.log('hello from self');
  },
  methods: {
  },
};
</script>
<style>
</style>
複製程式碼

控制檯中的列印：

image.png

與vuex的區別

vuex：用來做狀態管理的，裡面定義的變數在每個元件中均可以使用和修改，在任一元件中修改此變數的值之後，其他元件中此變數的值也會隨之修改。

Mixins：可以定義共用的變數，在每個元件中使用，引入元件中之後，各個變數是相互獨立的，值的修改在元件中不會相互影響。

與公共元件的區別

元件：在父元件中引入元件，相當於在父元件中給出一片獨立的空間供子元件使用，然後根據props來傳值，但本質上兩者是相對獨立的。

Mixins：則是在引入元件之後與元件中的物件和方法進行合併，相當於擴充套件了父元件的物件與方法，可以理解為形成了一個新的元件。

相關文章