iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
Modern Web

我的菜很有Vue味~系列 第 26

Day26 Vue 元件與客製事件

昨天我們最後說了我們如何把父元件的資料props到子元件,今天的話我就來說說如何將子元件處理好的狀態回傳給父元件吧。

先給大家一個認知「Props in, Event out」,父層透資料透過props傳入子層,子曾透過event來觸發父層狀態來更新。

在這裡我在子元件上註冊一個自訂義update事件,當update子元件被觸發時會同時觸發父元件selfUpdate

在這裡比較要注意的是$emit通常我們透過this.$emit('事件名稱',參數)的方式來觸發。

最後我們只要點擊update後就可以把子層的狀態回傳給父層。

但是現在我們不想用button來觸發的話,我們就會使用到.sync語法來觸發。
在這裡我們改用parent-message.sync="message",後面的update就可以不需要了。

這裡的話我們只用computed來處理我們的資料就行了。

最後我們就不需要用按鈕來觸發就可以去改動資料了。

今天就先到這了,明天見~


上一篇
Day25 Vue 雙向綁定 vs 單向綁定
下一篇
Day27 Vue CLI 介紹
系列文
我的菜很有Vue味~30

尚未有邦友留言

立即登入留言