元件介紹-Day05 # emit 向外層傳遞事件

圖像化

• div#app 對應就是根元件
  

emit傳遞事件

• Emit 觸發外部事件
  • 先定義外層元件接收的方法
  • 定義內層的 $emit 觸發方法
  • 使用 v-on 的方式觸發外層方法（口訣：前內、後外）
• 描述任務：我們預期點擊add按鈕之後，會觸發事件，並改變外層元件的數值
  ## 先定義外層元件接收的方法
  

定義內層的 $emit 觸發方法

使用 v-on 的方式傳出去emit方法來觸發外層方法（口訣：前內、後外）

• 我們定義好內層元件的emit方法後，我們要傳出去到外層並在外層上的內層元件的html標籤上綁定屬性，前內後外來觸發外層的方法，來改變data裡面的num
  

  ## 示範2：emit內層資料往外傳

• Emit 內層資料往外傳
  • 先定義外層元件接收的方法
    
  • 定義內層的 $emit 觸發方法
  • 使用 v-on 的方式觸發外層方法（口訣：前內、後外）
    

提醒

• 命名注意
  駝峰的大寫文字，可以改為 - 進行串接大寫改小寫