有時(shí)候，我們希望觸發(fā)父組件的某個(gè)事件時(shí)，可以通知到子組件；觸發(fā)子組件的某個(gè)事件時(shí)，可以通知到父組件。
Vue實(shí)例實(shí)現(xiàn)了一個(gè)自定義事件接口，用于在組件樹(shù)中通信。這個(gè)事件系統(tǒng)獨(dú)立于原生DOM事件，用法也不同。
每個(gè)Vue實(shí)例都是一個(gè)事件觸發(fā)器：
- 使用 $on() 監(jiān)聽(tīng)事件；
- 使用 $emit() 在它上面觸發(fā)事件（子組件向父組件傳遞）；
- 使用 $dispatch() 派發(fā)事件，事件沿著父鏈冒泡；
- 使用 $broadcast() 廣播事件，事件向下傳導(dǎo)給所有的后代。（父組件向子組件傳遞）
派發(fā)事件
下面這段代碼是一個(gè)簡(jiǎn)單的事件派發(fā)處理
我們將這個(gè)示例分為幾個(gè)步驟解讀：
- 子組件的button元素綁定了click事件，該事件指向notify方法
- 子組件的notify方法在處理時(shí)，調(diào)用了$dispatch，將事件派發(fā)到父組件的child-msg事件，并給該事件提供了一個(gè)msg參數(shù)
- 父組件的events選項(xiàng)中定義了child-msg事件，父組件接收到子組件的派發(fā)后，調(diào)用child-msg事件
運(yùn)行結(jié)果如下：
廣播事件
下面這段代碼是一個(gè)簡(jiǎn)單的事件廣播處理
我們將這個(gè)示例分為幾個(gè)步驟解讀：
- 父組件的button元素綁定了click事件，該事件指向notify方法
- 父組件的notify方法在處理時(shí)，調(diào)用了$broadcast，將事件派發(fā)到子組件的parent-msg事件，并給該事件提供了一個(gè)msg參數(shù)
- 子組件的events選項(xiàng)中定義了parent-msg事件，子組件接收到父組件的廣播后，調(diào)用parent-msg事件
運(yùn)行結(jié)果如下：
CURD示例
Vue.js組件的API來(lái)源于三部分———prop,slot和事件
- prop 允許外部環(huán)境傳遞數(shù)據(jù)給組件；
- 事件 允許組件觸發(fā)外部環(huán)境的action；
- slot 允許外部環(huán)境插入內(nèi)容到組件的視圖結(jié)構(gòu)內(nèi)
接下來(lái)就用這些知識(shí)交大家完成一個(gè)CURD實(shí)例。
<b>第一步——?jiǎng)?chuàng)建表格組件，添加查詢和刪除功能</b>
創(chuàng)建表格組件，添加過(guò)濾，數(shù)據(jù)刪除功能
<b>使用知識(shí)點(diǎn)</b>
使用Vue.component語(yǔ)法糖
Vue.component是創(chuàng)建并注冊(cè)組件的語(yǔ)法糖，使用Vue.component注冊(cè)的組件時(shí)全局的。使用prop將父組件數(shù)據(jù)傳遞個(gè)子組件
‘#app元素時(shí)父組件，simple-grid是子組件
在simple-grid組件中定義選項(xiàng)props：['dataList','columns','searchKey']
在#app下使用<simple-grid :data-list="people" :columns="columns" :search-key="searchQuery">將數(shù)據(jù)傳遞給simple-grid組件使用過(guò)濾器
{{col.name | capitalize}}使用了capitalize過(guò)濾器，將字符串的首字母轉(zhuǎn)換為大寫(xiě)后輸出。
filterBy filterKey使用了filterBy過(guò)濾器，根據(jù)指定條件過(guò)濾數(shù)組元素，filterBy返回過(guò)濾后的數(shù)組。使用數(shù)組索引別名
數(shù)組默認(rèn)的索引名稱為$index,v-for="(index,entry) in dataList"使用了數(shù)組索引別名。
括號(hào)中的第一個(gè)參數(shù)index是$index的別名，第二個(gè)參數(shù)是遍歷的數(shù)組元素。使用了v-bind和v-on指令的縮寫(xiě)
<simple-grid :data-list="people" :columns="columns" :search-key="searchQuery">使用了v-bind指令的縮寫(xiě)。 :data-list是v-bind:data-list的縮寫(xiě)； :columns是v-bind:columns的縮寫(xiě)； :search-key是v-bind:search-key的縮寫(xiě)。
<button @click="deleteItem(index)">delete</button>使用了v-on指令的縮寫(xiě)，@click是v-on:click的縮寫(xiě)
<b>第二步——?jiǎng)?chuàng)建對(duì)話框組件</b>
表格數(shù)據(jù)的添加和修改，我們使用模態(tài)對(duì)話框來(lái)實(shí)現(xiàn)。
模態(tài)對(duì)話框有兩種模式，新建模式和修改模式，分別用于新建一條數(shù)據(jù)和修改指定的數(shù)據(jù)。
由于對(duì)話框的內(nèi)容來(lái)源于具體的數(shù)據(jù)，所以我們可以考慮將對(duì)話框作為simple-grid組件的一個(gè)子組件。
model-dialog組件的模板內(nèi)容：
