成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue 的組件

kk_miles / 1108人閱讀

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

組件 
上一篇：Vue的表單輸入綁定：https://segmentfault.com/a/11...
使用組件 注冊(cè)組件

首先我們要?jiǎng)?chuàng)建一個(gè)實(shí)例：

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

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

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

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

渲染結(jié)果：


    
這是一個(gè)組件


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

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

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

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

局部注冊(cè)

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

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

我們來(lái)看看全局注冊(cè)和局部注冊(cè)的區(qū)別：

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

DOM 模板解析說(shuō)明

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

比如：

如上，這樣的寫(xiě)法在DOM里渲染時(shí)會(huì)反正錯(cuò)誤：

...

為了解決，就需要使用 is 屬性
模板字符串

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

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

這樣寫(xiě)的話就比較直觀了。

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

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

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

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

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

駝峰式命名和短橫線隔開(kāi)式命名

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

ue.component("child", {
  // camelCase in JavaScript
  props: ["myMessage"],
  template: "{{ myMessage }}"
})
自定義事件 使用 v-on 綁定自定義事件

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

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

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

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

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

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

 this.$emit("jieshou","abc")
非父子組件通訊

有時(shí)候兩個(gè)組件也需要通信 (非父子關(guān)系)。在簡(jiǎn)單的場(chǎng)景下，可以使用一個(gè)空的 Vue 實(shí)例作為中央事件總線：
使用 Slot 分發(fā)內(nèi)容

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

    

    

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

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

            
分發(fā)完成

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88346.html

相關(guān)文章

  • Vue組件基礎(chǔ)與通信

    摘要：組件基礎(chǔ)與通信一腳手架簡(jiǎn)介與安裝之前安裝的是模塊，之后安裝的是模塊。如果是三級(jí)組件通信，該如何處理比如父組件與孫子組件通信。和，提供和注入實(shí)現(xiàn)祖先組件和后代組件之間通信。 Vue組件基礎(chǔ)與通信 一、vue cli腳手架 ① vue cli 簡(jiǎn)介與安裝 vue cli 3.0之前安裝的是vue-cli模塊，vue cli 3.0之后安裝的是@vue/cli模塊。如果已經(jīng)全局安裝了舊版本的...

    I_Am 評(píng)論0 收藏0

  • vue組件

    摘要：構(gòu)造器有一個(gè)選項(xiàng)對(duì)象，選項(xiàng)對(duì)象的屬性用于定義組件要渲染的。使用注冊(cè)組件時(shí)，需要提供個(gè)參數(shù)，第個(gè)參數(shù)時(shí)組件的標(biāo)簽，第個(gè)參數(shù)是組件構(gòu)造器。方法內(nèi)部會(huì)調(diào)用組件構(gòu)造器，創(chuàng)建一個(gè)組件實(shí)例。 什么叫組件： 有結(jié)構(gòu)HTML 有樣式CSS 有交互（效果） 行為 信號(hào)量存數(shù)據(jù) 組件的行為可以定制？ 通過(guò)屬性設(shè)置 在Vue中有什么樣的組件(組件進(jìn)行分類)： 實(shí)現(xiàn)基本功能的基礎(chǔ)的組件（最小的元素） 可復(fù)...

    tianlai 評(píng)論0 收藏0

  • Vue-組件詳解

    摘要：除了監(jiān)聽(tīng)事件外，還可以用于組件之間的自定義事件。它僅僅作為一個(gè)直接訪問(wèn)子組件的應(yīng)急方案，應(yīng)當(dāng)避免在模板或計(jì)算屬性中使用。將和合并成，會(huì)自動(dòng)去判斷是普通標(biāo)簽還是組件。子組件這里的狀態(tài)綁定的是父組件的數(shù)據(jù)。 查看原文站點(diǎn)，更多擴(kuò)展內(nèi)容及更佳閱讀體驗(yàn)！ 組件詳解 組件與復(fù)用 Vue組件需要注冊(cè)后才可以使用。注冊(cè)有全局注冊(cè)和局部注冊(cè)兩種方式。 全局注冊(cè) Vue.component(my-com...

    dadong 評(píng)論0 收藏0

  • Vue.js-組件詳解

    摘要：事件總線事件總線首先創(chuàng)建了一個(gè)名為的空的實(shí)例然后全局定義了組件最后創(chuàng)建了實(shí)例。在父組件模板中，子組件標(biāo)簽上使用指定一個(gè)名稱，并在父組件內(nèi)通過(guò)來(lái)訪問(wèn)指定名稱的子組件。 學(xué)習(xí)筆記：組件詳解 組件詳解 組件與復(fù)用 Vue組件需要注冊(cè)后才可以使用。注冊(cè)有全局注冊(cè)和局部注冊(cè)兩種方式。 全局注冊(cè) Vue.component(my-component, {}); 要在父實(shí)例中使用這個(gè)組件，必須要...

    jeffrey_up 評(píng)論0 收藏0

  • vue中8種組件通信方式, 值得收藏!

    摘要：一父組件通過(guò)的方式向子組件傳遞數(shù)據(jù)，而通過(guò)子組件可以向父組件通信。而且只讀，不可被修改，所有修改都會(huì)失效并警告。 之前寫(xiě)了一篇關(guān)于vue面試總結(jié)的文章, 有不少網(wǎng)友提出組件之間通信方式還有很多, 這篇文章便是專門總結(jié)組件之間通信的 vue是數(shù)據(jù)驅(qū)動(dòng)視圖更新的框架, 所以對(duì)于vue來(lái)說(shuō)組件間的數(shù)據(jù)通信非常重要，那么組件之間如何進(jìn)行數(shù)據(jù)通信的呢？首先我們需要知道在vue中組件之間存在什么樣...

    BicycleWarrior 評(píng)論0 收藏0

  • Vue官方推薦的風(fēng)格指南

    摘要：官方推薦的風(fēng)格指南個(gè)人筆記最近剛注意到官方多了一個(gè)風(fēng)格指南的推薦。中始終用組件命名因?yàn)楣俜酵扑]風(fēng)格命名，所以能用就用組件命名單詞應(yīng)該是完整的單詞完整單詞帶易讀性的好處，和書(shū)寫(xiě)麻煩的缺點(diǎn)。 Vue官方推薦的風(fēng)格指南-個(gè)人筆記 最近剛注意到vue官方多了一個(gè)vue風(fēng)格指南的推薦。 因?yàn)闃I(yè)務(wù)中一直用的vue，所以梳理學(xué)習(xí)一下，來(lái)增加自己代碼的規(guī)范性，效果不錯(cuò)也可以安利到團(tuán)隊(duì)。 文檔沒(méi)有對(duì)JS...

    null1145 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<