vue-mixins和vue高階組件

咱們在開發過程當中,由於需求的變動,每每會碰見對現有組件的改造和擴展。vue

那麼咱們有什麼方法對現有組件進行改造和擴展呢?git

常見的咱們能夠使用mixins方式github

下面就讓咱們來看一下怎麼使用mixins方式對組件進行改造npm

咱們來先建立一個簡單的組件,如一個button和一個數字,點擊一次數字加一緩存

<template>
  <div class="home">
    <p>{{ count }}</p>
    <button @click="addcount()">新增</button>
  </div>
</template>

<script> export default { name: 'homeworld', data () { return { count: 0 } }, methods: { addcount () { this.count++; } } } </script>

若是咱們如今想改變需求,點擊按鈕,數字新增,可是新增個人值咱們本身定義markdown

使用mixins實現,下面是改造事後的組件動畫

<script> import helloworld from './HelloWorld' export default { name: 'homeworld', props: ['index'], // index爲傳入的數量
 mixins: [helloworld], // mixins 原先的組件
 methods: { //重寫 addcount 方法
 addcount () { this.count += parseInt(this.index); } } } </script>

若是咱們調用下面的組件而且傳入屬性index=5, 那麼咱們就會實現沒點擊一次count+5this

使用mixins咱們確實能夠實現對現有組件的改造,可是他也是有一些缺點的,spa

1.咱們必需要知道改造組件的內部結構,就如咱們不知道點擊事件名,那麼咱們就不能重寫新的點擊事件,咱們也須要知道組件的內部屬性等等。code

2.兩個組件有很強的依賴性,若是是嵌套加嵌套,代碼就很難去追尋本源,太亂了。

那麼咱們有沒有更好的方法去對組件進行擴展呢?

答案是有的咱們能夠使用高級組件,專業術語是HOC,其實就是包裹組件的組件

其實常見的高階組件咱們常常使用,如keep-alive, transition,一個是緩存組件,一個是動畫

Vue目前仍是使用mixin做爲官方的組件複用方式。

若是想了解更多的hot能夠看看這篇文章

https://github.com/coolriver/coolriver-site/blob/master/markdown/vue-mixin-hoc.md

  1. 暫時由熱心人士產出了一個npm包: vue-hoc來幫助Vue方便地實現HOC.
  2. 官方暫時不考慮將HOC加入vue core中,由於以爲相比於mixin的優點不夠巨大。

本身也試了一些,感受hoc達不到本身想要的那種效果。可能仍是本身不夠理解。

相關文章
相關標籤/搜索