[2020] 第12屆鐵人賽Day 12 跨多層的Vue元件資料傳遞: event bus
22 Sep 2020這週都在討論props（從外層傳到內層元件）與emit（從內層傳到外層），
如果是平行關係的元件（而非父子關係），要如何進行資料傳遞呢?
這週都在討論props（從外層傳到內層元件）與emit（從內層傳到外層），
如果是平行關係的元件（而非父子關係），要如何進行資料傳遞呢?
經過昨天介紹$emit可以傳遞自訂的事件給父層元件之後，今天來利用$emit的特性，設計一個有的to-do list吧!3M便利貼風格
元件內的資料傳遞可以說是Vue的大重點之一。
前兩天介紹了由外層父元件傳給子元件，
而今天要來說說如何把子元件由內到外進行「事件的單向傳遞」傳給父元件的Vue instance。
昨天提到props屬性可以將外層元件的資料，傳遞到內層元件。
舉的例子是傳入特定的author字串給News元件，
昨天鐵人賽提到了component元件是個堆積木的概念，讓我們可以更容易重複使用。結尾也提到了一個問題：在Vue裡面，不同的元件們該如何傳遞資料？
經過了三天的Vue簡單起手式，接著我們要回到Rails專案內實作了。（捲起袖子）
今天來了解一下元件的概念！
昨天我們討論了雙向事件處理: v-model 以及 v-on，讓我們可以跟使用者輸入的資料互動。
（例如對使用者的輸入的暱稱打招呼～）
昨天討論了單向資料流的鬍子語法，可以讓我們把Vue實例裡的資料流向html (View)。
但如果要將資料綁定HTML標籤屬性的時候，該怎麼辦呢？
舉例🌰而言，如果我們想把HTML的placeholder綁上vue instance的data屬性yourname，這個時候，我們可以使用v-bind。
昨天經過辛苦的環境安裝（擦汗），可以在Rails專案寫Vue了！先來個簡單的Vue起手式緩緩心情～
在第2天我們有提到，Vue.js 官網 這張MVVM架構的示意圖：
Model是資料邏輯：
View是使用者介面；
VM代表的是View Model。
在昨天的鐵人賽中，我們對於Rails的MVC架構和Vue.js的MVVC設計架構做些了解，對未來專案的前端、後端的檔案位置及有個初步的概念。那麼今天就直接來開個新專案吧！