摘要：根據組件單向數據流和和事件通信機制，需要由子組件通過事件通知父組件，并在父組件中修改原始的數據，完成狀態的更新。

本文同步在個人博客shymean.com上，歡迎關注

寫Vue有很長一段時間了，除了常規的業務開發之外，也應該思考和反思一下封裝組件的正確方式。以彈窗組件為例，一種實現是在需要模板中引入需要彈窗展示的組件，然后通過一個flag變量來控制彈窗的組件，在業務代碼里面會充斥著冗余的彈窗組件邏輯，十分不優雅。

本文整理了開發Vue組件的一些技巧，包含大量代碼示例。

vue-cli3提供了非常方便的功能，可以快速編寫一些測試demo，是開發組件必備的環境。下面是安裝使用步驟

// 全局安裝vue-cli3
npm install -g @vue/cli
vue -V // 查看版本是否為3.x

// 安裝擴展，此后可以快速啟動單個vue文件
npm install -g @vue/cli-service-global

// 快速啟動demo文件
vue serve demo.vue

如果需要scss，則還需要在目錄下安裝sass-loader等。

下面是使用vue-cli3可能會遇見的幾個問題，更多使用教程可以參考：一份超級詳細的Vue-cli3.0使用教程[趕緊來試試！]

自定義入口文件

如果需要（比如需要開發移動端的組件），可以在使用vue serve時自定義html入口文件，在根目錄下編寫index.html，并確保頁面包含#app的dom即可。

引入公共混合文件

通過style-resources-loader在每個文件引入公共樣式混合等，參考自動化導入

需要訪問Vue全局對象

在某些時候需要放問全局Vue對象，如開發全局指令、插件時

import Vue from "vue"
import somePlugin from "../src/somePlugin"

Vue.use(somePlugin)

上面這種寫法并不會生效，這是因為vue serve xxx.vue僅僅只能作為快速原型開發的方案，使用的Vue與 import引入的Vue不是同一個對象。一種解決辦法是手動指定vue serve的入口文件

// index.js
import Vue from "../node_modules/vue/dist/vue.min"
import placeholder from "../src/placeholder/placeholder"

Vue.use(placeholder)

new Vue({
    el: "#app",
    template: ``,
    created(){},
})

Vue組件的API主要包含三部分：prop、event、slot

props 表示組件接收的參數，最好用對象的寫法，這樣可以針對每個屬性設置類型、默認值或自定義校驗屬性的值，此外還可以通過type、validator等方式對輸入進行驗證

slot可以給組件動態插入一些內容或組件，是實現高階組件的重要途徑；當需要多個插槽時，可以使用具名slot

event是子組件向父組件傳遞消息的重要途徑

參考:單向數據流-官方文檔。

父級 prop 的更新會向下流動到子組件中，但是反過來則不行

單向數據流是Vue組件一個非常明顯的特征，不應該在子組件中直接修改props的值

如果傳遞的prop僅僅用作展示，不涉及修改，則在模板中直接使用即可

如果需要對prop的值進行轉化然后展示，則應該使用computed計算屬性

如果prop的值用作初始化，應該定義一個子組件的data屬性并將prop作為其初始值

從源碼/src/core/vdom/create-component.js和/src/core/vdom/helpers/extract-props.js里可以看見，在處理props的取值時，首先從

function extractPropsFromVNodeData(){
  const res = {}
  const { attrs, props } = data
  // 執行淺拷貝
  checkProp(res, props, key, altKey, true) || checkProp(res, attrs, key, altKey, false)

  return res
}

在子組件修改props，卻不會修改父組件，這是因為extractPropsFromVNodeData中是通過淺復制將attrs傳遞給props的。

淺復制意味著在子組件中對對象和數組的props進行修改還是會影響父組件，這就違背了單向數據流的設計。因此需要避免這種情況出現。

這里可以參考:vue組件通信全揭秘，寫的比較全面

父子組件的關系可以總結為 prop 向下傳遞，事件event向上傳遞

祖先組件和后代組件（跨多代）的數據傳遞，可以使用provide和inject來實現

此外，如果需要跨組件或者兄弟組件之間的通信，可以通過eventBus或者vuex等方式來實現。

考慮下面場景：父組件將數據通過prop形式傳遞給子組件，子組件進行相關操作并修改數據，需要修改父組件的prop值（一個典型的例子是：購物車的商品數量counter組件）。

根據組件單向數據流和和事件通信機制，需要由子組件通過事件通知父組件，并在父組件中修改原始的prop數據，完成狀態的更新。在子組件中修改父組件的數據的場景在業務中也是比較常見的，那么有什么辦法可以“繞開”單向數據流的限制呢"); 狀態提升

可以參考React的狀態提升，直接通過props將父元素的數據處理邏輯傳入子組件，子組件只做數據展示和事件掛載即可

<template>
    <div class="counter">
        <div class="counter_btn" @click="onMinus">-div>
        <div class="counter_val">{{value}}div>
        <div class="counter_btn" @click="onPlus">+div>
    div>
template>

<script>
    export default {
        props: {
            value: {
                type: Number,
                default: 0
            },
            onMinus: Function,
            onPlus: Function
        },
    };
script>

然后在調用時傳入事件處理函數

<template>
    <div>
        <counter :value="counter2Val" :on-minus="minusVal" :on-plus="plusVal">counter>
    div>
template>
<script>
    export default {
        data() {
            return {
                counter2Val: 0,
            }
        },
        methods: {
            minusVal(){
                this.counter2Val--
            },
            plusVal(){
                this.counter2Val++
            }
        }
    }
script>

很明顯，由于在每個父組件中都需要實現on-minus和on-plus，因此狀態提升并沒有從根本上解決問題。

Vue內置了v-model指令，v-model 是一個語法糖，可以拆解為 props: value 和 events: input。就是說組件只要提供一個名為 value 的 prop，以及名為 input 的自定義事件，滿足這兩個條件，使用者就能在自定義組件上使用 v-model

<template>
  <div>
    <button @click="changeValue(-1)">-1button>
    <span>{{currentVal}}span>
    <button @click="changeValue(1)">+1button>
  div>
template>

<script>
export default {
  props: {
    value: {
      type: Number // 定義value屬性
    }
  },
  data() {
    return {
      currentVal: this.value
    };
  },
  methods: {
    changeVal(val) {
      this.currentVal += parseInt(val);
      this.$emit("input", this.currentVal); // 定義input事件
    }
  }
};
script>

然后調用的時候只需要傳入v-model指令即可

<counter v-model="counerVal"/>

使用v-model，可以很方便地在子組件中同步父組件的數據。在2.2之后的版本中，可以定制v-model指令的prop和event名稱，參考model配置項

export default {
    model: {
        prop: "value",
        event: "input"
    },
    // ...
 }

在開發組件中，獲取組件實例是一個非常有用的方法。組件可以通過$refs、$parents、$children等方式獲得vm實例引用

$refs在組件（或者dom上）增加ref屬性即可

$parents獲取子組件掛載的父組件節點

$children，獲取組件的所有子節點

這些接口返回的都是vnode，可以通過vnode.componentInstance獲得對應的組件實例，然后直接調用組件的方法或訪問數據。雖然這種方式多多少少有些違背組件的設計理念，增加了組件之間的耦合成本，但代碼實現會更加簡潔。

通常情況下，表單驗證是表單提交前一個十分常見的應用場景。那么，如何把表單驗證的功能封裝在組件內部呢？

下面是一個表單組件的示例，展示了通過獲得組件的引用來實現表單驗證功能。

首先定義組件的使用方式，

xm-form接收model和rule兩個prop

model表示表單綁定的數據對象，最后表單提交的就是這個對象

rule表示驗證規則策略，表單驗證可以使用async-validator插件

xm-form-item接收的prop屬性，對應form組件的model和rule的某個key值，根據該key從model上取表單數據，從rule上取驗證規則

下面是使用示例代碼

<template>
    <div class="page">
        <xm-form :model="form" :rule="rule" ref="baseForm">
            <xm-form-item label="姓名" prop="name">
                <input v-model="form.name"/>
            xm-form-item>
            <xm-form-item label="郵箱" prop="email">
                <input v-model="form.email"/>
            xm-form-item>
            <xm-form-item>
                <button @click="submit">提交button>
            xm-form-item>
        xm-form>
    div>
template>

<script>
    import xmForm from "../src/form/form"
    import xmFormItem from "../src/form/form-item"

    export default {
        components: {
            xmForm,
            xmFormItem,
        },
        data() {
            return {
                form: {
                    name: "",
                    email: ""
                },
                rule: {
                    name: [
                        {required: true, message: "用戶名不能為空", trigger: "blur"}
                    ],
                    email: [
                        {required: true, message: "郵箱不能為空", trigger: "blur"},
                        {type: "email", message: "郵箱格式不正確", trigger: "blur"}
                    ],
                }
            }
        },
        methods: {
            submit() {
                // 調用form組件的validate方法
                this.$refs.baseForm.validate().then(res => {
                    console.log(res)
                }).catch(e => {
                    console.log(e)
                })
            }
        }
    }
script>

接下來讓我們實現form-item組件，其主要作用是放置表單元素，及展示錯誤信息

<template>
    <label class="form-item">
        <div class="form-item_label">{{label}}div>
        <div class="form-item_mn">
            <slot>slot>
        div>
        <div class="form-item_error" v-if="errorMsg">{{errorMsg}}div>
    label>
template>
<script>
    export default {
        name: "form-item",
        props: {
            label: String,
            prop: String
        },
        data() {
            return {
                errorMsg: ""
            }
        },
        methods: {
            showError(msg) {
                this.errorMsg = msg
            }
        }
    }
script>

然后讓我們來實現form組件

通過calcFormItems獲取每個xm-form-item的引用，保存在formItems中

暴露validate接口，內部調用AsyncValidator，并根據結果遍歷formItems中每個表單元素的prop屬性，處理對應的error信息

<template>
    <div class="form">
        <slot>slot>
    div>
template>

<script>
    import AsyncValidator from "async-validator";

    export default {
        name: "xm-form",
        props: {
            model: {
                type: Object
            },
            rule: {
                type: Object,
                default: {}
            }
        },
        data() {
            return {
                formItems: []
            }
        },
        mounted() {
            this.calcFormItems()
        },
        updated() {
            this.calcFormItems()
        },
        methods: {
            calcFormItems() {
                // 獲取form-item的引用
                if (this.$slots.default) {
                    let children = this.$slots.default.filter(vnode => {
                        return vnode.tag &&
                            vnode.componentOptions && vnode.componentOptions.Ctor.options.name === "form-item"
                    }).map(({componentInstance}) => componentInstance)

                    if (!(children.length === this.formItems.length && children.every((pane, index) => pane === this.formItems[index]))) {
                        this.formItems = children
                    }
                }
            },
            validate() {
                let validator = new AsyncValidator(this.rule);

                let isSuccess = true

                let findErrorByProp = (errors, prop) => {
                    return errors.find((error) => {
                        return error.field === prop
                    }) || ""
                }

                validator.validate(this.model, (errors, fields) => {
                    this.formItems.forEach(formItem => {
                        let prop = formItem.prop
                        let error = findErrorByProp(errors || [], prop)
                        if (error) {
                            isSuccess = false
                        }

                        formItem.showError(error && error.message || "")
                    })
                });

                return Promise.resolve(isSuccess)
            }
        }
    }
script>

這樣我們就完成了一個通用的表單驗證組件。從這個例子中可以看出獲取組件引用，在組件開發中是一個非常有用的方法。

一些組件如提示框、彈出框等，更適合多帶帶的API調用方式，如

import MessageBox from "@/components/MessageBox.vue"
MessageBox.toast("hello)

如何實現制這種不需要手動嵌入模板里面的組件呢？原來，除了在通過在模板中嵌入組件到children掛載組件，Vue還為組件提供了手動掛載的方法$mount

let component = new MessageBox().$mount()
document.getElementById("app").appendChild(component.$el)

通過這種方式，我們就是可以封裝API形式調用組件，下面是一個alert消息提示的接口封裝

一個消息組件就是在頁面指定繪制展示提示消息的組件，下面是簡單實現

<template>
    <div class="alert">
        <div class="alert-main" v-for="item in notices" :key="item.name">
            <div class="alert-content">{{ item.content }}div>
        div>
    div>
template>

<script>
    let seed = 0;

    function getUuid() {
        return "alert_" + (seed++);
    }

    export default {
        data() {
            return {
                notices: []
            }
        },
        methods: {
            add(notice) {
                const name = getUuid();

                let _notice = Object.assign({
                    name: name
                }, notice);

                this.notices.push(_notice);

                // 定時移除，單位：秒
                const duration = notice.duration;
                setTimeout(() => {
                    this.remove(name);
                }, duration * 1000);
            },
            remove(name) {
                const notices = this.notices;

                for (let i = 0; i < notices.length; i++) {
                    if (notices[i].name === name) {
                        this.notices.splice(i, 1);
                        break;
                    }
                }
            }
        }
    }
script>

下面來實現消息組件掛載到頁面的邏輯，并對外暴露展示消息的接口

// alert.js
import Vue from "vue";

// 具體的組件
import Alert from "./alert.vue";
Alert.newInstance = properties => {
    const props = properties || {};
	// 實例化一個組件，然后掛載到body上
    const Instance = new Vue({
        data: props,
        render (h) {
            return h(Alert, {
                props: props
            });
        }
    });
    const component = Instance.$mount();
    document.body.appendChild(component.$el);
	// 通過閉包維護alert組件的引用
    const alert = Instance.$children[0];
    return {
        // Alert組件對外暴露的兩個方法
        add (noticeProps) {
            alert.add(noticeProps);
        },
        remove (name) {
            alert.remove(name);
        }
    }
};

// 提示單例
let messageInstance;
function getMessageInstance () {
    messageInstance = messageInstance || Alert.newInstance();
    return messageInstance;
}
function notice({ duration = 1.5, content = "" }) {
    // 等待接口調用的時候再實例化組件，避免進入頁面就直接掛載到body上
    let instance = getMessageInstance();
    instance.add({
        content: content,
        duration: duration
    });
}

// 對外暴露的方法
export default {
    info (options) {
        return notice(options);
    }
}

然后就可以使用API的方式來調用彈窗組件了

import alert from "./alert.js"
// 直接使用
alert.info({content: "消息提示", duration: 2})
// 或者掛載到Vue原型上
Vue.prototype.$Alert = alert
// 然后在組件中使用
this.$Alert.info({content: "消息提示", duration: 2})

高階組件可以看做是函數式編程中的組合。可以把高階組件看做是一個函數，他接收一個組件作為參數，并返回一個功能增強的組件。

高階組件是一個接替Mixin實現抽象組件公共功能的方法，不會因為組件的使用而污染DOM（添加并不想要的div標簽等）、可以包裹任意的單一子元素等等

在React中高階組件是比較常用的組件封裝形式，在Vue中如何實現高階組件呢？

在組件的render函數中，只需要返回一個vNode數據類型即可，如果在render函數中提前做一些處理，并返回this.$slots.default[0]對應的vnode，就可以實現高階組件。

Vue內置了一個高階組件keep-alive，查看源碼可以發現其實現原理，就是通過維護一個cache，并在render函數中根據key返回緩存的vnode，來實現組件的持久化。

節流是web開發中處理事件比較常見的需求。常見的場景有及時搜索框避免頻繁觸發搜索接口、表單按鈕防止在短暫時間誤重復提交等

首先來看看Throttle組件的使用方式，接收兩個props

time表示節流的時間間隔

events表示需要處理的事件名，多個事件用逗號分隔

在下面的例子中，通過Throttle組件來控制其內部button的點擊事件，此時連續點擊多次，觸發clickBtn的次數要比點擊的次數小（節流函數通過一個定時器進行處理）。

 <template>
    <div>
        <Throttle :time="1000" events="click">
            <button @click="clickBtn">click {{count}}button>
        Throttle>
    div>
template>

下面是具體實現，實現高階組件的主要功能是在render函數中對當前插槽中的vnode進行處理

const throttle = function (fn, wait = 50, ctx) {
    let timer
    let lastCall = 0
    return function (...params) {
        const now = new Date().getTime()
        if (now - lastCall < wait) return
        lastCall = now
        fn.apply(ctx, params)
    }
}

export default {
    name: "throttle",
    abstract: true,
    props: {
        time: Number,
        events: String,
    },
    created() {
        this.eventKeys = this.events.split(",")
        this.originMap = {}
        this.throttledMap = {}
    },
    // render函數直接返回slot的vnode，避免外層添加包裹元素
    render(h) {
        const vnode = this.$slots.default[0]
        this.eventKeys.forEach((key) => {
            const target = vnode.data.on[key]
            if (target === this.originMap[key] && this.throttledMap[key]) {
                vnode.data.on[key] = this.throttledMap[key]
            } else if (target) {
                // 將原本的事件處理函數替換成throttle節流后的處理函數
                this.originMap[key] = target
                this.throttledMap[key] = throttle(target, this.time, vnode)
                vnode.data.on[key] = this.throttledMap[key]
            }
        })
        return vnode
    },
}

我們還可以進一步封裝，通過debounce函數來實現Debounce組件，可見高階組件的作用，就是為了增強某個組件而存在的。關于高階組件的其他應用，可以參考HOC(高階組件)在vue中的應用。

本文整理了幾種實現Vue組件的技巧

以counter計數器組件為例，展示了通過v-model語法糖同步父子組件的方式

以表單驗證組件為例，展示了通過獲取子組件的實例來封裝組件的方法

以全局彈窗組件為例，展示了手動mount掛載組件封裝API組件的方式

以throttle節流組件為例，展示了在vue中一種實現高階組件的方式

在了解Vue的API之后，理解上面的概念都比較輕松，封裝組件，除了對于API的熟練度之外，更多地是考察JavaScript基礎。Vue入門十分輕松，但是要寫好優雅的Vue代碼，也是一份不小的學問。