Vue學(xué)習(xí)筆記入門(mén)篇——組件雜項(xiàng)

本文為轉(zhuǎn)載,原文:Vue學(xué)習(xí)筆記入門(mén)篇——組件雜項(xiàng)

動(dòng)態(tài)組件

通過(guò)使用保留的 <'component'> 元素互墓,動(dòng)態(tài)地綁定到它的 is 特性,我們讓多個(gè)組件可以使用同一個(gè)掛載點(diǎn),并動(dòng)態(tài)切換:

<div id="app">
    <component :is="currentView"></component>
</div>
var home = {
    template:'<p>this is home</p>'
}
var posts = {
    template:'<p>this is posts</p>'
}
var archive = {
    template:'<p>this is archive</p>'
}

var app = new Vue({
    el:'#app',
    data:{
        currentView:'home'
    },
    components:{
        home:home,
        posts:posts,
        archive:archive
    }
})

運(yùn)行結(jié)果:



在控制臺(tái)中修改app.currentView的值愕撰,界面會(huì)動(dòng)態(tài)發(fā)生改變。
如果把切換出去的組件保留在內(nèi)存中醋寝,可以保留它的狀態(tài)或避免重新渲染搞挣。為此可以添加一個(gè) keep-alive 指令參數(shù):

<keep-alive>
  <component :is="currentView">
    <!-- 非活動(dòng)組件將被緩存! -->
  </component>
</keep-alive>

編寫(xiě)可復(fù)用組件

在編寫(xiě)組件時(shí)音羞,記住是否要復(fù)用組件有好處囱桨。一次性組件跟其它組件緊密耦合沒(méi)關(guān)系,但是可復(fù)用組件應(yīng)當(dāng)定義一個(gè)清晰的公開(kāi)接口嗅绰。
Vue 組件的 API 來(lái)自三部分 - props, events 和 slots :

Props 允許外部環(huán)境傳遞數(shù)據(jù)給組件
Events 允許從外部環(huán)境在組件內(nèi)觸發(fā)副作用
Slots 允許外部環(huán)境將額外的內(nèi)容組合在組件中

子組件索引

盡管有 props 和 events舍肠,但是有時(shí)仍然需要在 JavaScript 中直接訪(fǎng)問(wèn)子組件搀继。為此可以使用 ref 為子組件指定一個(gè)索引 ID。例如:

<div id="parent">
  <user-profile ref="profile"></user-profile>
</div>
var parent = new Vue({ el: '#parent' })
// 訪(fǎng)問(wèn)子組件
var child = parent.$refs.profile

當(dāng) ref 和 v-for 一起使用時(shí)翠语,ref 是一個(gè)數(shù)組叽躯,包含相應(yīng)的子組件。

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

組件命名約定

當(dāng)注冊(cè)組件 (或者 props) 時(shí)谍夭,可以使用 kebab-case黑滴,camelCase,或 PascalCase紧索。
在 HTML 模版中跷跪,請(qǐng)使用 kebab-case 形式。
當(dāng)使用字符串模式時(shí)齐板,可以不受 HTML 的 case-insensitive 限制吵瞻。

components: {
  'kebab-cased-component': { /* ... */ },
  camelCasedComponent: { /* ... */ },
  PascalCasedComponent: { /* ... */ }
}

如果組件未經(jīng) slot 元素傳遞內(nèi)容,你甚至可以在組件名后使用 / 使其自閉合.

<my-component/>

當(dāng)然甘磨,這只在字符串模版中有效橡羞。因?yàn)樽蚤]的自定義元素是無(wú)效的 HTML,瀏覽器原生的解析器也無(wú)法識(shí)別它济舆。

遞歸組件

組件在它的模板內(nèi)可以遞歸地調(diào)用自己卿泽,不過(guò),只有當(dāng)它有 name 選項(xiàng)時(shí)才可以:

name: 'unique-name-of-my-component'

當(dāng)你利用Vue.component全局注冊(cè)了一個(gè)組件, 全局的ID作為組件的 name 選項(xiàng)滋觉,被自動(dòng)設(shè)置.

Vue.component('unique-name-of-my-component', {
  // ...
})

如果你不謹(jǐn)慎, 遞歸組件可能導(dǎo)致死循環(huán):

name: 'stack-overflow',
template: '<div><stack-overflow></stack-overflow></div>'

上面組件會(huì)導(dǎo)致一個(gè)錯(cuò)誤“max stack size exceeded”签夭,所以要確保遞歸調(diào)用有終止條件 (比如遞歸調(diào)用時(shí)使用 v-if 并讓他最終返回 false )。

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

如果子組件有 inline-template 特性椎侠,組件將把它的內(nèi)容當(dāng)作它的模板第租,而不是把它當(dāng)作分發(fā)內(nèi)容。這讓模板更靈活我纪。

<div id="app">
    <my-component inline-template>
        <div>
            <p>These are compiled as the component's own template.</p>
            <p>Not parent's transclusion content.</p>
        </div>
    </my-component>
</div>
    Vue.component('my-component',{
    })
    new Vue({
        el:'#app'
    })

運(yùn)行結(jié)果:



但是 inline-template 讓模板的作用域難以理解慎宾。最佳實(shí)踐是使用 template 選項(xiàng)在組件內(nèi)定義模板或者在 .vue 文件中使用 template 元素。

x-Templates

另一種定義模版的方式是在 JavaScript 標(biāo)簽里使用 text/x-template 類(lèi)型浅悉,并且指定一個(gè) id趟据。例如:

<script type="text/x-template" id="hello-world-template">
  <p>Hello hello hello</p>
</script>
Vue.component('hello-world', {
  template: '#hello-world-template'
})

這在有很多模版或者小的應(yīng)用中有用,否則應(yīng)該避免使用术健,因?yàn)樗鼘⒛0婧徒M件的其他定義隔離了汹碱。

對(duì)低開(kāi)銷(xiāo)的靜態(tài)組件使用 v-once

盡管在 Vue 中渲染 HTML 很快,不過(guò)當(dāng)組件中包含大量靜態(tài)內(nèi)容時(shí)荞估,可以考慮使用 v-once 將渲染結(jié)果緩存起來(lái)咳促,就像這樣:

Vue.component('terms-of-service', {
  template: '\
    <div v-once>\
      <h1>Terms of Service</h1>\
      ... a lot of static content ...\
    </div>\
  '
})

其他

還有一些異步組件色难,和遞歸組件暫時(shí)先不介紹,等以后學(xué)習(xí)到webpack時(shí)在說(shuō)這個(gè)問(wèn)題等缀。

本文為原創(chuàng)枷莉,轉(zhuǎn)載請(qǐng)注明出處。
上一節(jié):Vue學(xué)習(xí)筆記入門(mén)篇——組件的內(nèi)容分發(fā)(slot)
返回目錄
下一節(jié):Vue學(xué)習(xí)筆記進(jìn)階篇——單元素過(guò)度

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末尺迂,一起剝皮案震驚了整個(gè)濱河市笤妙,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌噪裕,老刑警劉巖蹲盘,帶你破解...
    沈念sama閱讀 211,496評(píng)論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異膳音,居然都是意外死亡召衔,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,187評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén)祭陷,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)苍凛,“玉大人,你說(shuō)我怎么就攤上這事兵志〈己” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,091評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵想罕,是天一觀的道長(zhǎng)悠栓。 經(jīng)常有香客問(wèn)我,道長(zhǎng)按价,這世上最難降的妖魔是什么惭适? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,458評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮楼镐,結(jié)果婚禮上癞志,老公的妹妹穿的比我還像新娘。我一直安慰自己鸠蚪,他們只是感情好今阳,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,542評(píng)論 6 385
  • 文/花漫 我一把揭開(kāi)白布师溅。 她就那樣靜靜地躺著茅信,像睡著了一般。 火紅的嫁衣襯著肌膚如雪墓臭。 梳的紋絲不亂的頭發(fā)上蘸鲸,一...
    開(kāi)封第一講書(shū)人閱讀 49,802評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音窿锉,去河邊找鬼酌摇。 笑死膝舅,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的窑多。 我是一名探鬼主播仍稀,決...
    沈念sama閱讀 38,945評(píng)論 3 407
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼埂息!你這毒婦竟也來(lái)了技潘?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,709評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤千康,失蹤者是張志新(化名)和其女友劉穎享幽,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體拾弃,經(jīng)...
    沈念sama閱讀 44,158評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡值桩,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,502評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了豪椿。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片奔坟。...
    茶點(diǎn)故事閱讀 38,637評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖搭盾,靈堂內(nèi)的尸體忽然破棺而出蛀蜜,到底是詐尸還是另有隱情,我是刑警寧澤增蹭,帶...
    沈念sama閱讀 34,300評(píng)論 4 329
  • 正文 年R本政府宣布滴某,位于F島的核電站,受9級(jí)特大地震影響滋迈,放射性物質(zhì)發(fā)生泄漏霎奢。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,911評(píng)論 3 313
  • 文/蒙蒙 一饼灿、第九天 我趴在偏房一處隱蔽的房頂上張望幕侠。 院中可真熱鬧,春花似錦碍彭、人聲如沸晤硕。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,744評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)舞箍。三九已至,卻和暖如春皆疹,著一層夾襖步出監(jiān)牢的瞬間疏橄,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,982評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留捎迫,地道東北人晃酒。 一個(gè)月前我還...
    沈念sama閱讀 46,344評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像窄绒,于是被迫代替她去往敵國(guó)和親贝次。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,500評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容彰导,還有我對(duì)于 Vue 1.0 印象不深的內(nèi)容浊闪。關(guān)于...
    云之外閱讀 5,046評(píng)論 0 29
  • 此文基于官方文檔,里面部分例子有改動(dòng)螺戳,加上了一些自己的理解 什么是組件搁宾? 組件(Component)是 Vue.j...
    陸志均閱讀 3,806評(píng)論 5 14
  • 下載安裝搭建環(huán)境 可以選npm安裝,或者簡(jiǎn)單下載一個(gè)開(kāi)發(fā)版的vue.js文件 瀏覽器打開(kāi)加載有vue的文檔時(shí)倔幼,控制...
    冥冥2017閱讀 6,033評(píng)論 0 42
  • Vue 實(shí)例 屬性和方法 每個(gè) Vue 實(shí)例都會(huì)代理其 data 對(duì)象里所有的屬性:var data = { a:...
    云之外閱讀 2,204評(píng)論 0 6
  • 1.安裝 可以簡(jiǎn)單地在頁(yè)面引入Vue.js作為獨(dú)立版本盖腿,Vue即被注冊(cè)為全局變量,可以在頁(yè)面使用了损同。 如果希望搭建...
    Awey閱讀 10,999評(píng)論 4 129