Vue 的組件

kk_miles 發(fā)布于2019-08-21 16:16 / 1106人閱讀

摘要：組件上一篇的表單輸入綁定使用組件注冊組件首先我們要創(chuàng)建一個實(shí)例要注冊一個全局組件，你可以使用。使用傳遞數(shù)據(jù)組件實(shí)例的作用域是孤立的。這意味著不能也不應(yīng)該在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。

組件

上一篇：Vue的表單輸入綁定：https://segmentfault.com/a/11...

使用組件 注冊組件

首先我們要創(chuàng)建一個實(shí)例：

new Vue({
    el:".exp",
    // ......
})

要注冊一個全局組件，你可以使用 Vue.component(tagName, options)。例如：

Vue.component("my-component", {
  // 選項(xiàng)
})

組件在注冊之后，便可以在父實(shí)例的模塊中以自定義元素 < my-component >< /my-component > 的形式使用。要確保在初始化根實(shí)例之前注冊了組件：

渲染結(jié)果：


    這是一個組件

對于自定義標(biāo)簽名，Vue.js 不強(qiáng)制要求遵循 W3C 規(guī)則 (小寫，并且包含一個短杠)，盡管遵循這個規(guī)則比較好。

我們知道，在創(chuàng)建的實(shí)例里面是有data數(shù)據(jù)的，其實(shí)在組件里也可以寫數(shù)據(jù)：

Vue.component("my-component"{
    templent:"",
    data:function(){
        return{
            msg:"hello"
        }
    }
})

注意！組件里的data必須是一個函數(shù)，并將屬性返回

局部注冊

不必在全局注冊每個組件。通過使用組件實(shí)例選項(xiàng)注冊，可以使組件僅在另一個實(shí)例/組件的作用域中可用：

渲染結(jié)果和上一個例子是一樣的。

我們來看看全局注冊和局部注冊的區(qū)別：

局部注冊的組件，只能在 .exp1 內(nèi)使用，拿給 .exp 是不可以的，當(dāng)然我們把全局注冊的組件給 .exp1 ，是可以生效的。

DOM 模板解析說明

當(dāng)使用 DOM 作為模板時 (例如，將 el 選項(xiàng)掛載到一個已存在的元素上), 你會受到 HTML 的一些限制，因?yàn)?Vue 只有在瀏覽器解析和標(biāo)準(zhǔn)化 HTML 后才能獲取模板內(nèi)容。尤其像這些元素 < ul >，< ol >，< table >，< select > 限制了能被它包裹的元素，而一些像 < option > 這樣的元素只能出現(xiàn)在某些其它元素內(nèi)部。

比如：

如上，這樣的寫法在DOM里渲染時會反正錯誤：

...

為了解決，就需要使用 is 屬性

模板字符串

有時候我們可能要在組件里寫很多的標(biāo)簽，如果統(tǒng)統(tǒng)像上面那樣寫的話，看起來很費(fèi)勁，這時候就可以使用模板字符串：

< script type="text/x-template" >< /script >

這樣寫的話就比較直觀了。

Prop 使用 prop 傳遞數(shù)據(jù)

組件實(shí)例的作用域是孤立的。這意味著不能 (也不應(yīng)該) 在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。要讓子組件使用父組件的數(shù)據(jù)，我們需要通過子組件的 props 選項(xiàng)。

子組件要顯式地用 props 選項(xiàng)聲明它期待獲得的數(shù)據(jù)：

在上面的例子中，我們要在子組件 tk 里傳一個參數(shù)，就需要使用 prop 屬性.

這種方式是靜態(tài)綁定的方法，還有就是利用 v-bind 指令進(jìn)行動態(tài)綁定：

駝峰式命名和短橫線隔開式命名

HTML 特性是不區(qū)分大小寫的。所以，當(dāng)使用的不是字符串模板，camelCased (駝峰式) 命名的 prop 需要轉(zhuǎn)換為相對應(yīng)的 kebab-case (短橫線隔開式) 命名：

ue.component("child", {
  // camelCase in JavaScript
  props: ["myMessage"],
  template: "{{ myMessage }}"
})

自定義事件 使用 v-on 綁定自定義事件

每個 Vue 實(shí)例都實(shí)現(xiàn)了事件接口 (Events interface)，即：

$on(enentName) 監(jiān)聽事件

$emit(eventName) 觸發(fā)事件

我們可以使用 $emit 來用子組件觸發(fā)父組件的事件：

當(dāng)我們點(diǎn)擊第二個按鈕時，就會觸發(fā)父組件內(nèi)的 alert 事件。

其實(shí)我們也可以傳遞參數(shù)，由父組件接收：

 this.$emit("jieshou","abc")

非父子組件通訊

有時候兩個組件也需要通信 (非父子關(guān)系)。在簡單的場景下，可以使用一個空的 Vue 實(shí)例作為中央事件總線：

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

這部分官方文檔說的有點(diǎn)啰嗦，我這邊就合到一塊說吧。直接上個例子：

    

    
        
            Slot內(nèi)容分發(fā)

            為了讓組件可以組合，我們需要一種方式來混合父組件的內(nèi)容與子組件自己的模板。這個過程被稱為 內(nèi)容分發(fā) (或 “transclusion” 如果你熟悉 Angular)。Vue.js 實(shí)現(xiàn)了一個內(nèi)容分發(fā) API，參照了當(dāng)前 Web 組件規(guī)范草案，使用特殊的  元素作為原始內(nèi)容的插槽。
            分發(fā)完成

< slot >被成為插口，在組件中，我們需要使用 slot 插口預(yù)留一個位置，以方便分發(fā)內(nèi)容。如上，在放置正文內(nèi)容的地方，我們直接插入一對 slot 標(biāo)簽標(biāo)記出正文內(nèi)容的位置。對于頁面標(biāo)題和頁腳等特殊的位置，我們就需要"具名Slot"，用一個特殊的屬性 name 來配置如何分發(fā)內(nèi)容。多個 slot 可以有不同的名字。具名 slot 將匹配內(nèi)容片段中有對應(yīng) slot 特性的元素。

To be continue......

上一篇：Vue的表單輸入綁定：https://segmentfault.com/a/11...