建議學(xué)習(xí)時(shí)長(zhǎng)： 45分鐘
學(xué)習(xí)方式：了解
學(xué)習(xí)目標(biāo)
- 知道如何創(chuàng)建組件。
- 知道如何向組件傳值罢吃。
- 知道如何處理組件觸發(fā)的事件。
詳細(xì)介紹
組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一疾捍。組件可以擴(kuò)展 HTML 元素男杈，封裝可重用的代碼。在較高層面上糟袁，組件是自定義元素判族，Vue.js 的編譯器為它添加特殊功能。
通讀組件的介紹项戴。
組件通信
父組件傳遞數(shù)據(jù)給子組件
父組件使用 Prop 傳遞數(shù)據(jù)給子組件形帮。
<child-component :prop1="父組件的數(shù)據(jù)1" :prop2="父組件的數(shù)據(jù)2"></child-component>
子組件只接收在子組件定義的 props的值。通過(guò) this.prop名稱 獲得父組件傳數(shù)據(jù)周叮。
// 子組件
Vue.component('child-component', {
props: ['prop1', 'prop2'], // 定義接收哪些 props
template: '<div>{{prop1 + prop2}}</div>',
...
}
父組件調(diào)用子組件屬性或方法
給要調(diào)用的子組件起個(gè)名字辩撑。將名字設(shè)置為子組件 rel 屬性的值。
<!-- 子組件仿耽。 ref的值是組件引用的名稱 -->
<child-component ref="aName"></child-component>
父組件中通過(guò) $refs.組件名 來(lái)獲得子組件合冀，也就可以調(diào)用子組件的屬性和方法了。
var child = this.$refs.aName
child.屬性
child.方法()
父組件通過(guò) $children 可以獲得所有直接子組件（父組件的子組件的子組件不是直接子組件）项贺。需要注意 $children 并不保證順序君躺，也不是響應(yīng)式的。
Vue 在 V2.1.0 版本后增加了的 Scoped Slots 的特性敬扛。該特性支持在子組件的 slot 中用子組件的數(shù)據(jù)晰洒。用法是：子組件在 slot 上定義傳給父組件的數(shù)據(jù)，父組件通過(guò) scope 屬性來(lái)拿子組件數(shù)據(jù)啥箭。如
<!-- 子組件 -->
<slot :describe="describe"></slot>
<!-- 父組件 -->
<child-component >
<template scope="childScope">
子元素傳給父組件的數(shù)據(jù)：{{childScope.describe}}
</template>
</child-component>
詳情見(jiàn)這里谍珊。
子組件傳遞數(shù)據(jù)給父組件
子組件通過(guò)事件傳遞父組件傳數(shù)據(jù)。子組件通過(guò)$emit(eventName)觸發(fā)事件急侥，父組件通過(guò)$on(eventName)監(jiān)聽(tīng)事件砌滞。
<child-component @somesth-happen="handlerHappen"></child-component>
somesth-happen 是事件名稱侮邀，handlerHappen 是觸發(fā)后，父組件的處理函數(shù)贝润。
子組件調(diào)用父組件屬性或方法
子組件通過(guò) $parent 獲得父組件绊茧，通過(guò) $root 獲得最上層的組件。
