国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Element組件引發(fā)的Vue中mixins使用，寫出高復(fù)用組件

AlphaGooo / 1844人閱讀

摘要：我們就來說說如何創(chuàng)建一個(gè)靈活的高復(fù)用的組件。在一款優(yōu)秀的組件庫中有這么兩個(gè)組件與。什么是官方說法混入是一種分發(fā)組件中可復(fù)用功能的非常靈活的方式。對象可以包含實(shí)例中的所有選項(xiàng)，當(dāng)組件使用對象時(shí)，對象中的所有選項(xiàng)將和組件中的選項(xiàng)進(jìn)行合并。

我們都知道 Vue 采用的是一種組件化開發(fā)模式，組件在 Vue 中一個(gè)非常重要的核心概念。每個(gè)組件都是一個(gè)完整的實(shí)例，組件的創(chuàng)建，組件間的通訊，組件如何更好的復(fù)用，以及整個(gè)的生命周期的鉤子。所以你會(huì)發(fā)現(xiàn)它都是圍繞組件展開的。

我們就來說說如何創(chuàng)建一個(gè)靈活的高復(fù)用的組件。之前分享過一篇「slot」內(nèi)容分發(fā)的文章，它可以讓我們組件的內(nèi)容更加的靈活。有興趣的可以看下。

《Vue一個(gè)案例引發(fā)「內(nèi)容分發(fā)slot」的最全總結(jié).md》

今天主要分享的是組件中另一種分發(fā)，功能的分發(fā)「mixins」，也叫混入。在開始之前呢，我們先看個(gè)案例，先從案例中看出個(gè)大概，然后帶著問題去學(xué)習(xí)知識(shí)點(diǎn)會(huì)更加的高效，這也是我個(gè)人比較常用的學(xué)習(xí)方式。

在 Element（一款優(yōu)秀的組件庫）中有這么兩個(gè)組件MessageBox 與 Dialog。


官方說法：

從場景上說，MessageBox 的作用是美化系統(tǒng)自帶的 alert、confirm 和 prompt，因此適合展示較為簡單的內(nèi)容。如果需要彈出較為復(fù)雜的內(nèi)容，請使用 Dialog。

所以你會(huì)發(fā)現(xiàn)，這兩個(gè)組件非常的相似，他們共享一些相同的基本功能，如：打開/關(guān)閉之間的狀態(tài)切換。但用法上又各有不同。請看下面的例子

// Message Box



// Dialog
打開 Dialog

  這是一段信息

相似的組件，相同基本功能，這時(shí)你不得不做出選擇，是將它們分成兩個(gè)不同的組件？還是只保留一個(gè)？

顯然這兩種做法都不完美，如果分成兩個(gè)組件，后期有功能的變動(dòng)話，就會(huì)去修改多次，帶來維護(hù)成本。如果保留一個(gè)，但是用法上又各有不同，這可怎么辦呢？

有同學(xué)也會(huì)有疑問，不就兩個(gè)組件嗎？能帶來多少維護(hù)成本？其實(shí)不僅如此，類似于這種狀態(tài)切換的功能還有提示框，彈出框等等。

所以 Vue 給我們提供了一種方案叫功能的分發(fā)「mixins」。

什么是 Mixins

官方說法：混入 (mixins) 是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式。

簡單來說就是可以讓不同的組件「共用」某個(gè)功能。

Mixins 對象可以包含 Vue 實(shí)例中的所有選項(xiàng)，當(dāng)組件使用 Mixins 對象時(shí)，Mixins 對象中的所有選項(xiàng)將和組件中的選項(xiàng)進(jìn)行合并。

既然如此那我們就來嘗試用 Mixins 對象 去修改上面兩個(gè)組件。讓它們可以共用一個(gè)方法。以下組件都是自己書寫的簡單實(shí)現(xiàn)，只實(shí)現(xiàn)狀態(tài)切換的基本功能。

//mixins.js
export const showMixin = {
  data: function () {
    return {
      isShowing: true
    };
  },
  methods: {
    toggle() {
      this.isShowing = !this.isShowing;
    }
  }
}

//MessageBox

可以看到，我們把兩個(gè)組件的相同功能給剝離出來，采用 mixins 對象的方式然后在組件中引入即可，這樣以來組件就會(huì)有更好的靈活性。

有聰明的小伙伴應(yīng)該就會(huì)有疑問了，如果 mixins 對象中的選項(xiàng)和組件實(shí)例中的選項(xiàng)相同時(shí)會(huì)怎么辦？這也是我們下面要說到的問題，Vue 中給出了我們幾個(gè)決策機(jī)制，一起來看看。

選項(xiàng)的合并

data 對象的合并

當(dāng)組件與混入對象的 data 對象發(fā)生沖突時(shí)，以組件中的優(yōu)先，如何沒有沖突將會(huì)進(jìn)行遞歸合并。

const mixin = {
  data: function() {
    return {
      hero: "蠻三刀",
      text: "來自mixins中的「上單一霸」"
    };
  }
};
export default {
  name: "DialogBox",
  mixins: [mixin],
  data() {
    return {
      text: "來自組件中的「上單一霸」"
    };
  },
  mounted() {
    console.log(this.$data); 
    // {hero: "蠻三刀",text: "來自組件中的「上單一霸」"}
  }
};

鉤子函數(shù)的合并

鉤子函數(shù)將會(huì)被全部調(diào)用，因?yàn)橥^子函數(shù)將會(huì)被合并成一個(gè)數(shù)組，但 mixins 中的鉤子會(huì)優(yōu)先于組件中的鉤子執(zhí)行。

const mixin = {
  created() {
    console.log("mixins中的上單一霸");
  },
  mounted() {
    console.log("mixins中的中單一霸");
  }
};
export default {
  name: "DialogBox",
  mixins: [mixin],
  created() {
    console.log("組件中的上單一霸");
  },
  mounted() {
    console.log("組件中的中單一霸");
  }
};
//mixins中的上單一霸
//組件中的上單一霸
//mixins中的中單一霸
//組件中的中單一霸

3.值為對象類型的合并

像methods、watch等值為對象類型的會(huì)合并成一個(gè)對象，如有沖突將采用組件中的。

const mixin = {
  methods: {
    say() {
      console.log("mixins組件上單一霸");
    },
    do() {
      console.log("mixins偷塔");
    }
  }
};
export default {
  name: "DialogBox",
  mixins: [mixin],
  methods: {
    say() {
      console.log("組件上單一霸");
    }
  },
  mounted() {
    this.say(); //組件上單一霸
    this.do(); //mixins偷塔
  }
};

通過上面一些案例的解釋，你應(yīng)該熟悉了如何利用 混入對象去創(chuàng)建一個(gè)高復(fù)用組件了，不妨去嘗試一下。

最后，希望大家能夠有所收獲。如果你覺得本文不錯(cuò)歡迎點(diǎn)贊轉(zhuǎn)發(fā)。

關(guān)注微信公眾號：六小登登，學(xué)習(xí)更多干貨文章，領(lǐng)取全套學(xué)習(xí)資源。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/101940.html

相關(guān)文章

  • vue之插件編寫

    摘要：插件分類插件通常會(huì)為添加全局功能，插件的編寫方法一般分為類，如上圖所示的插件應(yīng)當(dāng)有一個(gè)公開方法。 前言 前段時(shí)間看到黃軼老師的一篇文章感觸頗多。特別是下面這一段話 插件 Vue 化引發(fā)的一些思考這篇文章我不僅僅是要教會(huì)大家封裝一個(gè) scroll 組件，還想傳遞一些把第三方插件（原生 JS 實(shí)現(xiàn)）Vue 化的思考過程。很多學(xué)習(xí) Vue.js 的同學(xué)可能還停留在 XX 效果如何用 Vue....

    xuexiangjys 評論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...

    sutaking 評論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...

    khs1994 評論0 收藏0

  • vue 項(xiàng)目總結(jié)一組件開發(fā)的配置和例子

    摘要：入口文件，影響全局，作用是引入全局使用的庫公共的樣式和方法設(shè)置路由等。項(xiàng)目里總會(huì)有一些復(fù)用的組件，例如彈出框發(fā)送手機(jī)驗(yàn)證碼圖片上傳等，將它們作為通用組件，避免重復(fù)工作結(jié)構(gòu)如下可以根據(jù)功能模塊建立文件夾，放置本功能會(huì)用到的通用組件。 上一篇文章 https://segmentfault.com/a/11... 介紹了項(xiàng)目里文件夾的分類和作用，這次主要說明 src 文件夾里具體的文件分類和...

    melody_lql 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<