iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 19
0
Modern Web

Vue.js 30天系列 第 19

Vue.js 19 - 組件/元件(Component) - 其他補充

列完大綱,這篇還在寫,晚點再來看吧。

組件(component)間的其他連結

Vue.js 14Vue.js 15 兩篇分別介紹組件內外資料交換的標準途徑,其實組件間還存在其他連結,各有其用途。某些情況甚至可以當成直接溝通途徑,接下來一一介紹。

$parent/$children/$root

第一個直接連結是父子組件間的交互參照

  • 父組件可透過$children直接存取其下一層的子組件。
  • 子組件可透過$parent直接存取其上一層的父組件。
  • 不論父子組件都可透過$root,直接存取最頂層的Vue Instance。

能存取別的組件、Vue Instance,你就能使用它的屬性/方法。

ref屬性 & $refs

第二個直接連結是組件的自訂索引名 - ref,用於父組件對子組件的參照。

<div id="parent">
  <user-profile ref="profile"></user-profile>
</div>

定義好的索引名,可以透過父組件的$refs取得

var parent = new Vue({ el: '#parent' })
/* 存取子組件 */
var child = parent.$refs.profile

若是搭配v-for,$refs對應的索引名也會取得陣列/JSON

<div id="parent">
  <user-profile v-for="user in users" ref="profile"></user-profile>
</div>
typeof parent.$refs.profile /* Array */

這個屬性在畫面渲染完才會更新,資料可能不同步,只適合當備用方案。

[1.x] v-el & $els

第三個直接連結是DOM的自訂索引名。

<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>
this.$els.msg.textContent // -> "hello"
this.$els.otherMsg.textContent // -> "world"

相當於你選取特定id的DOM,可直接操作DOM物件。

跟data-driven概念背離,2.x被拿掉。


特殊情境

非同步組件

用於動態載入組件定義、延後組件註冊。

遞迴組件

跟遞迴函數的概念一樣,重複利用組件。

需要在組件定義中加上name

{
    components: {
        name: 'unique-name-of-my-component',
        /* template...and else */
    }
}
Vue.component('unique-name-of-my-component', {
  /* 全域註冊會自動補上 name: 'unique-name-of-my-component' */
})

補上name只是讓Vue允許你在<template>內使用
既然是遞迴,少了終止條件免不了炸掉堆疊,記得補上。

{
    name: 'stack-overflow',
    template: '<div><stack-overflow v-if="isEnd"></stack-overflow></div>',
    computed: {
        isEnd: function() {
            return /* 你的終止條件 */;
        }
    }
}

加速組件編譯

  • v-once
    一次性編譯,用於不會改變的靜態資料
  • v-pre
    跳過不編譯,用於不會改變的靜態樣板

上一篇
Vue.js 18 - 組件/元件(Component) - 組件掛載及限制
下一篇
Vue.js 20 - Ajax取得資料 - vue-resource
系列文
Vue.js 30天30

尚未有邦友留言

立即登入留言