常見(jiàn)的限制元素還有

、
、。

除了template選項(xiàng)外，組件中還可以像Vue實(shí)例那樣使用其他的選項(xiàng)，比如data、computed、methods等。

但是在使用data時(shí)，data必須是函數(shù)，然后將數(shù)據(jù)return出去。

JavaScript對(duì)象是引用關(guān)系，如果return的對(duì)象引用了外部的一個(gè)對(duì)象，那這個(gè)對(duì)象就是共享的，任何一方修改都會(huì)同步。

使用props傳遞數(shù)據(jù)

組件不僅要把模板的內(nèi)容進(jìn)行復(fù)用，更重要的是組件間進(jìn)行通信。

通常父組件的模板中包含子組件，父組件要正向地向子組件傳遞數(shù)據(jù)或參數(shù)，子組件接收后根據(jù)參數(shù)的不同渲染不同的內(nèi)容或者執(zhí)行操作。這個(gè)正向傳遞數(shù)據(jù)的過(guò)程通過(guò)props來(lái)實(shí)現(xiàn)。

在組件中，使用選項(xiàng)props聲明需要從父級(jí)接收的數(shù)據(jù)，props的值可以是兩種，一種是字符串?dāng)?shù)組，一種是對(duì)象。

props: ["message"],
template: `
{{message}}
`,

props中聲明的數(shù)據(jù)與組件data函數(shù)中return的數(shù)據(jù)主要區(qū)別就是props的數(shù)據(jù)來(lái)自父級(jí)，而data中的是組件自己的數(shù)據(jù)，作用域是組件本身，這兩種數(shù)據(jù)都可以在模板template及計(jì)算屬性computed和方法methods中使用。

由于HTML特性不區(qū)分大小寫，當(dāng)使用DOM模板時(shí)，駝峰命名的props名稱要轉(zhuǎn)為短橫線分割命名。

有時(shí)候，傳遞的數(shù)據(jù)并不是直接寫死，而是來(lái)自父級(jí)的動(dòng)態(tài)數(shù)據(jù)，這時(shí)可以使用指令v-bind動(dòng)態(tài)綁定props的值，當(dāng)父組件的數(shù)據(jù)變化時(shí)，也會(huì)傳遞子組件。

props: ["message"], template: `
{{message}}
`, data: { parentMessage: "" }

這里用v-model綁定了父級(jí)的數(shù)據(jù)parentMessage，當(dāng)通過(guò)輸入框任意輸入時(shí)，子組件接收到的props["message"]也會(huì)實(shí)時(shí)響應(yīng)，并更新組件模板。

單向數(shù)據(jù)流

業(yè)務(wù)中會(huì)經(jīng)常遇到兩種需要改變prop的情況，一種是父組件傳遞初始值進(jìn)來(lái)，子組件將它作為初始值保存起來(lái)，在自己的作用域下可以隨意使用和修改。這種情況可以在組件data內(nèi)再聲明一個(gè)數(shù)據(jù)，引用父組件的prop。

    


Vue.component("my-component", {
    props: ["initCount"],
    template: `
{{count}}
`,
    data() {
        return {
            count:this.initCount
        }
    }
});

組件中聲明了數(shù)據(jù)count，它在組件初始化時(shí)會(huì)獲取來(lái)自父組件的initCount，之后就與之無(wú)關(guān)了，只用維護(hù)count，這樣就可以避免直接操作initCount。

另一種情況就是prop作為需要被轉(zhuǎn)變的原始值傳入，這種情況用計(jì)算屬性就可以。

    


Vue.component("my-component", {
    props: ["width"],
    template: `
組件內(nèi)容
`,
    computed: {
        style: function () {
            return {
                width: this.width + "px"
            }
        }
    }
});

因?yàn)橛肅SS傳遞寬度要帶單位（px），數(shù)值計(jì)算一般不帶單位，所以統(tǒng)一在組件內(nèi)使用計(jì)算屬性。

在JavaScript中對(duì)象和數(shù)組時(shí)引用類型，指向同一個(gè)內(nèi)存空間，所以props是對(duì)象和數(shù)組時(shí)，在子組件內(nèi)改變是會(huì)影響父組件。

數(shù)組驗(yàn)證

當(dāng)prop需要驗(yàn)證時(shí)，需要對(duì)象寫法。

一般當(dāng)組件需要提供給別人使用時(shí)，推薦都進(jìn)行數(shù)據(jù)驗(yàn)證。比如某個(gè)數(shù)據(jù)必須是數(shù)字類型，如果傳入字符串，就會(huì)在控制臺(tái)彈出警告。

See the Pen prop by whjin (@whjin) on CodePen.




在改變組件的data "counter"后，通過(guò)$emit()再把它傳遞給父組件，父組件用@increase和@reduce。$emit()方法的第一個(gè)參數(shù)是自定義事件的名稱。

除了用v-on在組件上監(jiān)聽(tīng)自定義事件外，也可以監(jiān)聽(tīng)DOM事件，這時(shí)可以用.native修飾符表示監(jiān)聽(tīng)時(shí)一個(gè)原生事件，監(jiān)聽(tīng)的是該組件的根元素。

使用v-model

Vue可以在自定義組件上使用v-model指令。

組件$emit()的事件名時(shí)特殊的input，在使用組件的父級(jí)，并沒(méi)有在上使用@input="handler"，而是直接用了v-model綁定的一個(gè)數(shù)據(jù)total。

v-model還可以用來(lái)創(chuàng)建自定義的表單輸入組件，進(jìn)行數(shù)據(jù)雙向綁定。

See the Pen v-model雙向綁定 by whjin (@whjin) on CodePen.




$broadcast()是由上級(jí)向下級(jí)廣播事件，用法完全一致，方向相反。

這兩種方法一旦發(fā)出事件后，任何組件都可以接收到，就近原則，而且會(huì)在第一次接收到后停止冒泡，除非返回true。

這些方法在Vue 2.x版本中已廢棄。

在Vue 2.x中，推薦任何一個(gè)空的Vue實(shí)例作為中央事件總線（bus），也就是一個(gè)中介。

See the Pen Vue-bus事件總線 by whjin (@whjin) on CodePen.




在父組件模板中，子組件標(biāo)簽上使用ref指定一個(gè)名稱，并在父組件內(nèi)通過(guò)this.$refs來(lái)訪問(wèn)指定名稱的子組件。

$refs只在組件渲染完成后才填充，并且它是非響應(yīng)式的。它僅僅作為一個(gè)直接訪問(wèn)子組件的應(yīng)急方案，應(yīng)當(dāng)避免在模板或計(jì)算屬性中使用$refs。

Vue 2.x將v-el和v-ref合并成ref，Vue會(huì)自動(dòng)去判斷是普通標(biāo)簽還是組件。

使用slot分發(fā)內(nèi)容

當(dāng)需要讓組件組合使用，混合父組件的內(nèi)容與子組件的模板時(shí)，就會(huì)用到slot，這個(gè)過(guò)程叫做內(nèi)容分發(fā)。

組件不知道它的掛載點(diǎn)會(huì)有什么內(nèi)容。掛載點(diǎn)的內(nèi)容是由的父組件決定的。

組件很可能有它自己的模板。

props傳遞數(shù)據(jù)、events觸發(fā)事件和slot內(nèi)容分發(fā)就構(gòu)成了Vue組件的3個(gè)API來(lái)源，再?gòu)?fù)雜的組件也是由這3部分構(gòu)成。

作用域

父組件中的模板：

    {{message}}

這里的message就是一個(gè)slot，但是它綁定的是父組件的數(shù)據(jù)，而不是組件的數(shù)據(jù)。

父組件模板的內(nèi)容是在父組件作用域內(nèi)編譯，子組件模板的內(nèi)容是在子組件作用域內(nèi)編譯。

    


Vue.component("child-component", {
    template: `
子組件1
`,
});
var app = new Vue({
    el: "#app",
    data: {
        showChild: true
    }
});

這里的狀態(tài)showChild綁定的是父組件的數(shù)據(jù)。

在子組件上綁定數(shù)據(jù)：

    


Vue.component("child-component", {
    template: `
子組件
`,
    data() {
        return {
            showChild: true
        }
    }
});
var app = new Vue({
    el: "#app",
});

因此，slot分發(fā)的內(nèi)容，作用域是在父組件上。

單個(gè)slot

在子組件內(nèi)使用特殊的元素就可以為這個(gè)組件開(kāi)啟一個(gè)slot（插槽），在父組件模板里，插入在子組件標(biāo)簽內(nèi)的所有內(nèi)容將替代子組件的標(biāo)簽及它的內(nèi)容。

    
        
分發(fā)的內(nèi)容
        
更多分發(fā)的內(nèi)容
    


Vue.component("child-component", {
    template: `
    

        
           
如果沒(méi)有父組件插入內(nèi)容，我將作為默認(rèn)出現(xiàn)。
        
    
            `,
});
var app = new Vue({
    el: "#app",
});

子組件child-component的模板內(nèi)定義了一個(gè)元素，并且用一個(gè)

作為默認(rèn)的內(nèi)容，在父組件沒(méi)有使用slot時(shí)，會(huì)渲染這段默認(rèn)的文本；如果寫入了slot，就會(huì)替換整個(gè)。

子組件內(nèi)的備用內(nèi)容，它的作用域是子組件本身。

具名Slot

給元素指定一個(gè)name后可以分發(fā)多個(gè)內(nèi)容，具名slot可以與單個(gè)slot共存。

See the Pen Vue-slot by whjin (@whjin) on CodePen.




通過(guò)$slots可以訪問(wèn)某個(gè)具名slot,this.$slots.default包括了所有沒(méi)有被包含在具名slot中的節(jié)點(diǎn)。

組件高級(jí)用法 遞歸組件

給組件設(shè)置name選項(xiàng)，組件在它的模板內(nèi)可以遞歸地調(diào)用自己。

    


Vue.component("child-component", {
    name: "child-component",
    props: {
        count: {
            type: Number,
            default: 1
        }
    },
    template: `

    

    `,
});

組件遞歸使用可以用來(lái)開(kāi)發(fā)一些具有未知層級(jí)關(guān)機(jī)的獨(dú)立組件，比如級(jí)聯(lián)選擇器和樹(shù)形控件等。

內(nèi)聯(lián)模板

組件的模板一般都是在template選項(xiàng)內(nèi)定義的，Vue提供了一個(gè)內(nèi)聯(lián)模板的功能，在使用組件時(shí)，給組件標(biāo)簽使用inline-template特性，組件就會(huì)把它的內(nèi)容當(dāng)做模板，而不是把它當(dāng)內(nèi)容分發(fā)，這讓模板更靈活。

See the Pen Vue-inline-template by whjin (@whjin) on CodePen.




可以直接綁定在組件對(duì)象上：

    


var Home = {
    template: `
Welcome home!
`
};

var app = new Vue({
    el: "#app",
    data: {
        currentView: Home
    }
});

異步組件

Vue.js允許將組件定義為一個(gè)工廠函數(shù)，動(dòng)態(tài)地解析組件。

Vue.js只在組件需要渲染時(shí)觸發(fā)工廠函數(shù)，并且把結(jié)果緩存起來(lái)，用于后面的再次渲染。

    


Vue.component("child-component", function (resolve, reject) {
    window.setTimeout(function () {
        resolve({
            template: `
我是異步渲染的！
`
        })
    }, 1000)
});

var app = new Vue({
    el: "#app",
});

工廠函數(shù)接收一個(gè)resolve回調(diào)，在收到從服務(wù)器下載的組件定義時(shí)調(diào)用。也可以調(diào)用reject(reason)指示加載失敗。

其他 $nextTick

異步更新隊(duì)列

Vue在觀察到數(shù)據(jù)變化時(shí)并不是直接更新DOM，而是開(kāi)啟一個(gè)隊(duì)列，并緩沖在同一個(gè)事件循環(huán)中發(fā)生的所有數(shù)據(jù)變化。在緩沖時(shí)會(huì)去除重復(fù)數(shù)據(jù)，從而避免不必要的計(jì)算和DOM操作。然后，在一下個(gè)事件循環(huán)tick中，Vue刷新隊(duì)列并執(zhí)行實(shí)際（已去重的）工作。

Vue會(huì)根據(jù)當(dāng)前瀏覽器環(huán)境優(yōu)先使用原生的Promise.then和MutationObserver，如果都不支持，就會(huì)采用setTimeout代替。

$nextTick就是用來(lái)確定什么時(shí)候DOM更新已經(jīng)完成。

See the Pen Vue-$nextTick by whjin (@whjin) on CodePen.


Vue.component("my-component", { template: `#my-component`, }); var app = new Vue({ el: "#app", }); 手動(dòng)掛載實(shí)例

在一些非常特殊的情況下，需要?jiǎng)討B(tài)地創(chuàng)建Vue實(shí)例，Vue提供了Vue.extend和$mount兩個(gè)方法來(lái)手動(dòng)掛載一個(gè)實(shí)例。

Vue.extend是基礎(chǔ)Vue構(gòu)造器，創(chuàng)建一個(gè)“子類”，參數(shù)是一個(gè)包含組件選項(xiàng)的對(duì)象。

如果Vue實(shí)例在實(shí)例化時(shí)沒(méi)有收到el選項(xiàng)，它就處于“未掛載”狀態(tài)，沒(méi)有關(guān)聯(lián)的DOM元素。可以使用$mount手動(dòng)地掛載一個(gè)未掛載的實(shí)例。這個(gè)方法返回實(shí)例自身，因而可以鏈?zhǔn)秸{(diào)用其他實(shí)例方法。

See the Pen Vue-$mount by whjin (@whjin) on CodePen.



閱讀需要支付1元查看
支付并查看