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

本文同步在個(gè)人博客shymean.com上，歡迎關(guān)注

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

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

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

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

// 安裝擴(kuò)展，此后可以快速啟動(dòng)單個(gè)vue文件
npm install -g @vue/cli-service-global

// 快速啟動(dòng)demo文件
vue serve demo.vue

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

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

自定義入口文件

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

引入公共混合文件

通過style-resources-loader在每個(gè)文件引入公共樣式混合等，參考自動(dòng)化導(dǎo)入

需要訪問Vue全局對象

在某些時(shí)候需要放問全局Vue對象，如開發(fā)全局指令、插件時(shí)

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

Vue.use(somePlugin)

上面這種寫法并不會(huì)生效，這是因?yàn)?b>vue serve xxx.vue僅僅只能作為快速原型開發(fā)的方案，使用的Vue與 import引入的Vue不是同一個(gè)對象。一種解決辦法是手動(dòng)指定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 表示組件接收的參數(shù)，最好用對象的寫法，這樣可以針對每個(gè)屬性設(shè)置類型、默認(rèn)值或自定義校驗(yàn)屬性的值，此外還可以通過type、validator等方式對輸入進(jìn)行驗(yàn)證

slot可以給組件動(dòng)態(tài)插入一些內(nèi)容或組件，是實(shí)現(xiàn)高階組件的重要途徑；當(dāng)需要多個(gè)插槽時(shí)，可以使用具名slot

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

參考:單向數(shù)據(jù)流-官方文檔。

父級 prop 的更新會(huì)向下流動(dòng)到子組件中，但是反過來則不行

單向數(shù)據(jù)流是Vue組件一個(gè)非常明顯的特征，不應(yīng)該在子組件中直接修改props的值

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

如果需要對prop的值進(jìn)行轉(zhuǎn)化然后展示，則應(yīng)該使用computed計(jì)算屬性

如果prop的值用作初始化，應(yīng)該定義一個(gè)子組件的data屬性并將prop作為其初始值

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

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

  return res
}

在子組件修改props，卻不會(huì)修改父組件，這是因?yàn)?b>extractPropsFromVNodeData中是通過淺復(fù)制將attrs傳遞給props的。

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

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

父子組件的關(guān)系可以總結(jié)為 prop 向下傳遞，事件event向上傳遞

祖先組件和后代組件（跨多代）的數(shù)據(jù)傳遞，可以使用provide和inject來實(shí)現(xiàn)

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

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

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

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

<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>

然后在調(diào)用時(shí)傳入事件處理函數(shù)

<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>

很明顯，由于在每個(gè)父組件中都需要實(shí)現(xiàn)on-minus和on-plus，因此狀態(tài)提升并沒有從根本上解決問題。

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

然后調(diào)用的時(shí)候只需要傳入v-model指令即可

<counter v-model="counerVal"/>

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

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

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

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

$parents獲取子組件掛載的父組件節(jié)點(diǎn)

$children，獲取組件的所有子節(jié)點(diǎn)

這些接口返回的都是vnode，可以通過vnode.componentInstance獲得對應(yīng)的組件實(shí)例，然后直接調(diào)用組件的方法或訪問數(shù)據(jù)。雖然這種方式多多少少有些違背組件的設(shè)計(jì)理念，增加了組件之間的耦合成本，但代碼實(shí)現(xiàn)會(huì)更加簡潔。

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

下面是一個(gè)表單組件的示例，展示了通過獲得組件的引用來實(shí)現(xiàn)表單驗(yàn)證功能。

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

xm-form接收model和rule兩個(gè)prop

model表示表單綁定的數(shù)據(jù)對象，最后表單提交的就是這個(gè)對象

rule表示驗(yàn)證規(guī)則策略，表單驗(yàn)證可以使用async-validator插件

xm-form-item接收的prop屬性，對應(yīng)form組件的model和rule的某個(gè)key值，根據(jù)該key從model上取表單數(shù)據(jù)，從rule上取驗(yàn)證規(guī)則

下面是使用示例代碼

<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() {
                // 調(diào)用form組件的validate方法
                this.$refs.baseForm.validate().then(res => {
                    console.log(res)
                }).catch(e => {
                    console.log(e)
                })
            }
        }
    }
script>

接下來讓我們實(shí)現(xiàn)form-item組件，其主要作用是放置表單元素，及展示錯(cuò)誤信息

<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>

然后讓我們來實(shí)現(xiàn)form組件

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

暴露validate接口，內(nèi)部調(diào)用AsyncValidator，并根據(jù)結(jié)果遍歷formItems中每個(gè)表單元素的prop屬性，處理對應(yīng)的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>

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

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

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

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

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

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

一個(gè)消息組件就是在頁面指定繪制展示提示消息的組件，下面是簡單實(shí)現(xiàn)

<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);

                // 定時(shí)移除，單位：秒
                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>

下面來實(shí)現(xiàn)消息組件掛載到頁面的邏輯，并對外暴露展示消息的接口

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

// 具體的組件
import Alert from "./alert.vue";
Alert.newInstance = properties => {
    const props = properties || {};
	// 實(shí)例化一個(gè)組件，然后掛載到body上
    const Instance = new Vue({
        data: props,
        render (h) {
            return h(Alert, {
                props: props
            });
        }
    });
    const component = Instance.$mount();
    document.body.appendChild(component.$el);
	// 通過閉包維護(hù)alert組件的引用
    const alert = Instance.$children[0];
    return {
        // Alert組件對外暴露的兩個(gè)方法
        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 = "" }) {
    // 等待接口調(diào)用的時(shí)候再實(shí)例化組件，避免進(jìn)入頁面就直接掛載到body上
    let instance = getMessageInstance();
    instance.add({
        content: content,
        duration: duration
    });
}

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

然后就可以使用API的方式來調(diào)用彈窗組件了

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

高階組件可以看做是函數(shù)式編程中的組合?？梢园迅唠A組件看做是一個(gè)函數(shù)，他接收一個(gè)組件作為參數(shù)，并返回一個(gè)功能增強(qiáng)的組件。

高階組件是一個(gè)接替Mixin實(shí)現(xiàn)抽象組件公共功能的方法，不會(huì)因?yàn)榻M件的使用而污染DOM（添加并不想要的div標(biāo)簽等）、可以包裹任意的單一子元素等等

在React中高階組件是比較常用的組件封裝形式，在Vue中如何實(shí)現(xiàn)高階組件呢？

在組件的render函數(shù)中，只需要返回一個(gè)vNode數(shù)據(jù)類型即可，如果在render函數(shù)中提前做一些處理，并返回this.$slots.default[0]對應(yīng)的vnode，就可以實(shí)現(xiàn)高階組件。

Vue內(nèi)置了一個(gè)高階組件keep-alive，查看源碼可以發(fā)現(xiàn)其實(shí)現(xiàn)原理，就是通過維護(hù)一個(gè)cache，并在render函數(shù)中根據(jù)key返回緩存的vnode，來實(shí)現(xiàn)組件的持久化。

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

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

time表示節(jié)流的時(shí)間間隔

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

在下面的例子中，通過Throttle組件來控制其內(nèi)部button的點(diǎn)擊事件，此時(shí)連續(xù)點(diǎn)擊多次，觸發(fā)clickBtn的次數(shù)要比點(diǎn)擊的次數(shù)?。ü?jié)流函數(shù)通過一個(gè)定時(shí)器進(jìn)行處理）。

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

下面是具體實(shí)現(xiàn)，實(shí)現(xiàn)高階組件的主要功能是在render函數(shù)中對當(dāng)前插槽中的vnode進(jìn)行處理

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函數(shù)直接返回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) {
                // 將原本的事件處理函數(shù)替換成throttle節(jié)流后的處理函數(shù)
                this.originMap[key] = target
                this.throttledMap[key] = throttle(target, this.time, vnode)
                vnode.data.on[key] = this.throttledMap[key]
            }
        })
        return vnode
    },
}

我們還可以進(jìn)一步封裝，通過debounce函數(shù)來實(shí)現(xiàn)Debounce組件，可見高階組件的作用，就是為了增強(qiáng)某個(gè)組件而存在的。關(guān)于高階組件的其他應(yīng)用，可以參考HOC(高階組件)在vue中的應(yīng)用。

本文整理了幾種實(shí)現(xiàn)Vue組件的技巧

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

以表單驗(yàn)證組件為例，展示了通過獲取子組件的實(shí)例來封裝組件的方法

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

以throttle節(jié)流組件為例，展示了在vue中一種實(shí)現(xiàn)高階組件的方式

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