咱們在開發過程當中,由於需求的變動,每每會碰見對現有組件的改造和擴展。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
本身也試了一些,感受hoc達不到本身想要的那種效果。可能仍是本身不夠理解。