vue可複用性

混入mixin

經常使用場景

有兩個類似的組件, 他們基本功能是同樣的, 可是他們以前又存在差別,正常思惟是: 是把它拆成兩個不一樣的組件呢, 仍是保留爲一個組件,使用props傳值來創造差別從而進行區分
兩個方案都不完美: 若是拆分紅兩個組件, 你就不得不冒着一旦功能變化就要在兩個文件中更新代碼的風險,
若是經過props傳值很快會變得混亂, 從而迫使維護者在使用組件的時候必須理解一大段的上下文,拖慢寫代碼速度

使用mixin, vue中的mixin對編寫函數式風格的代碼頗有用, 由於函數式編程就是經過減小移動的部分讓代碼更好理解. mixin容許你封裝一塊在應用的其餘組件均可以使用的函數, 若是使用得當,他們不會改變函數做用域外部的任何東西.

基礎實例

咱們有一對不一樣的組件,他們的做用是經過切換狀態來展現或者隱藏模態框或者提示框, 這些提示框和模態框除了功能類似之外,沒有其餘共同點. 他們看起來不同,用法不同,可是邏輯同樣~~~~

// 模態框
      const Modal = {
        template: '#modal',
        data() {
          return {
            isShowing: false
          }
        },
        methods: {
          toggleShow() {
            this.isShowing = !this.isShowing;
          }
        },
        components: {
          appChild: Child
        }
      }

      // 提示框
      const Tooltip = {
        template: '#tooltip',
        data() {
          return {
            isShowing: false
          }
        },
        methods: {
          toggleShow() {
            this.isShowing = !this.isShowing;
          }
        },
        components: {
          appChild: Child
        }
      }

咱們能夠在這裏提取邏輯並建立能夠被重用的項

const toggle = {
         data() {
           return {
             isShowing: false
           }
         },
         methods: {
           toggleShow() {
             this.isShowing = !this.isShowing;
           }
         }
       }

       const Modal = {
         template: '#modal',
         mixins: [toggle],
         components: {
           appChild: Child
         }
       };

       const Tooltip = {
         template: '#tooltip',
         mixins: [toggle],
         components: {
           appChild: Child
         }
       };

用法

1. 能夠在項目裏新建一個mixin目錄, 建立一個js文件,在文件裏須要輸出一個對象

1. 在modal.vue文件中引入這個mixin

<template>
    <div>
        <p v-show="isShowing">模態框顯示</p>
        <div @click="toggleShow">點擊顯示隱藏</div>
    </div>

</template>
<script>
import {
    toggle
} from './mixins/toggle'
export default {
    name: 'modal',
    data() {
            return {
        }
    },
    mixins: [toggle]
}

</script>

選項合併

當組件和混入對象有同名選項時,這個選項會以恰當的方式進行合併

1. 數據對象會在內部進行遞歸合併,發生衝突會以組件爲先
2. 同名的鉤子函數會合併爲一個數組, 將都被調用.混入對象的鉤子將在組件鉤子前調用
3. 值爲對象的選項, 好比methods components 和 directives, 將會合併爲一個對象, 當對象鍵值對衝突時, 將會以組件爲主

自定義組件

簡介

vue容許自定義組件. 有些狀況下, 也須要對原生dom進行操做.這時候就須要使用自定義組件
例子: 輸入框,默認聚焦

<input v-focus />
directives: {   
    focus: {
        inserted: function (el) {
            el.focus();
        }
    }
}

鉤子函數

一個自定義組件有如下鉤子函數

1. bind 只調用一次,指令第一次綁定元素時調用, 在這裏能夠進行初始化設置
2. inserted 被綁定元素插入父節點時調用
3. update 所在組件的vnode更新時調用
4. componentUpdated 指令所在組件vnode及其子vnode所有更新後調用
5. unbind 只調用一次, 指令與元素解綁時調用

過濾器

vue容許你自定義過濾器. 可被用於一些經常使用的文件格式化.過濾器能夠用在兩個地方：雙花括號插值和 v-bind 表達式 (後者從 2.1.0+ 開始支持)。過濾器應該被添加在 JavaScript 表達式的尾部，由「管道」符號指示：

<input v-focus v-model="message" />

<div id="hook-arguments-example">{{message | capitalize}}</div>


filters: {
    capitalize: function (value) {
        return value.toUpperCase()
    }
}