DAY 13 - 元件資料傳遞方式 props 、emit

元件資料傳遞方式

每個元件的資料都是獨立的，我們不能直接修改元件裡的資料，所以要透過專門的資料傳遞方式來傳遞資料，那就是 props 、emit 。

我們首先在 App.vue 下 放了兩個元件 元件A、元件B，此時架構會像下方一樣， 元件A、元件B 是屬於 App.vue 的子元件，而 App.vue 則是父元件，元件溝通時父子元件會透過 props 、emit 傳遞資料。

傳遞方向 :
Props - 外層(父)傳內層(子)
emit - 內層(子)傳外層(父)

Props 、 emit 寫法

把元件傳遞想像是一種資料的連結、傳輸，內外都需要有名稱然後綁定連結，並記住口訣前內後外，接著我們試著寫看看...

props

• 外 app.vue - ref textFather 裡面放入文字 app.vue 的文字
• 內 ContentA.vue - 用 defineProps() 方法寫一個 textChild
• 連結 - (前內後外)在元件後方 <元件名稱 內名稱 ="外名稱" /> ，<ContentA textChild ="textFather" />

另一種寫法

• 內層 : props:[ "textChild"]
  兩種聲明都是使用 props，可以挑喜歡的寫法寫
  

emit

props 在傳遞運用比較單純，通常是外面資料需要導入內層使用，而 emit 則是比較特別，一般我們不太會把子元件資料取出來特別使用，但是如果需要觸發到子元件裡的元素就會需要傳出資料。

emit通常是使用事件方式觸發，回傳資料

我有個父元件 app 裡面有個 ContentB ，我想要點下裡面的按鈕讓外面更新，這時候要怎麼做呢 ?

這時候先不寫 emit ，我們點看看，會發現我們無法觸發子元件裡的事件，所以點了都沒反應 (No!!)

讓我們來加入 emit，觸發子元件裡的事件

• 內 ContentB.vue - 用 defineEmits() 方法，聲明觸發事件add-num
• 內 ContentB.vue template - 在要觸發事件的按鈕上加上$emit ，套入觸發的事件 @click="$emit('add-num')"
• 外 app.vue - (前內後外) emit使用<元件名稱 @內名稱 ="方法" />， 套入 @add-num=" count++"

內層的方法建議使用 - ，因為 HTML無法辨識大寫，如果要使用大寫也要使用 - 避免出錯，所以建議直接寫 add-num，不要寫addNum