Vue 2.x 混入 mixins

作者:辰風(fēng)沐陽 閱讀:1758 發(fā)布時(shí)間:2023-04-03 上次更新:2023-12-31

1. 混入概述


混入 (minxin) 提供了一種非常靈活的方式,來分發(fā) Vue 組件中的可復(fù)用功能。一個(gè)混入對象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對象時(shí),所有混入對象的選項(xiàng)將被 “混合” 進(jìn)入該組件本身的選項(xiàng)

  1. // 定義一個(gè)混入對象
  2. const myMixin = {
  3. data() {
  4. return {
  5. name: "liang",
  6. };
  7. },
  8. methods: {
  9. sayHello() {
  10. console.log("hello !");
  11. },
  12. },
  13. };
  14. // 定義一個(gè)使用混入對象的組件
  15. export default {
  16. mixins: [myMixin],
  17. data() {
  18. return {}
  19. }
  20. }

2. 選項(xiàng)合并


當(dāng)組件和混入對象含有同名選項(xiàng)時(shí),這些選項(xiàng)將 以恰當(dāng)?shù)姆绞竭M(jìn)行合并

數(shù)據(jù)對象 (data 選項(xiàng)) 在內(nèi)部會(huì)進(jìn)行遞歸合并,同名時(shí)以組件數(shù)據(jù)優(yōu)先,示例如下所示:

如果混入 myMixin, myMixin2 兩個(gè)對象,數(shù)據(jù)對象同名時(shí)優(yōu)先級(jí)為:組件數(shù)據(jù) > myMixin2 數(shù)據(jù) > myMixin 數(shù)據(jù)

  1. mixins: [myMixin, myMixin2]

同名鉤子函數(shù)將合并為一個(gè)數(shù)組,都會(huì)被調(diào)用?;烊雽ο蟮你^子將在組件自身鉤子之前調(diào)用。

  1. const mixin = {
  2. created() {
  3. console.log('混入對象的鉤子被調(diào)用')
  4. }
  5. }
  6. new Vue({
  7. mixins: [mixin],
  8. created() {
  9. console.log('組件鉤子被調(diào)用')
  10. }
  11. })
  12. // => "混入對象的鉤子被調(diào)用"
  13. // => "組件鉤子被調(diào)用"

對于值為對象的選項(xiàng),如:methods、components、directives,將合并為一個(gè)對象,鍵名同名時(shí)取組件對象的鍵值對

  1. const mixin = {
  2. methods: {
  3. foo() {
  4. console.log("混入對象的方法");
  5. },
  6. },
  7. };
  8. new Vue({
  9. mixins: [mixin],
  10. methods: {
  11. foo() {
  12. console.log("組件的方法");
  13. },
  14. },
  15. });
  16. vm.foo() // => "組件的方法"

3. 全局混入


uView 小程序分享 利用全局混入實(shí)現(xiàn)全局分享

混入也可以進(jìn)行全局注冊,使用時(shí)一定要格外小心 !一旦使用全局混入,將影響每一個(gè)之后創(chuàng)建的 Vue 實(shí)例

  1. const mixin = {
  2. methods: {
  3. foo() {
  4. console.log("混入對象的方法");
  5. },
  6. },
  7. };
  8. Vue.mixin(mixin);

標(biāo)簽: vue vue2