來到第26天，如果大家有跟著進度走，想必也有收獲了，隨著網站越來越豐富，當然component一定也用了不少吧？那你很可能會遇上一個問題，還記得一開始說的「資料」和「函式」存在頁面裡，component只負責接收資料並呈現內容嗎？那當我們在component設製了按鈕等事件…該如何傳到父層呼叫函式？接下來就是今天的重點了…

$emit

還記得「component」、「v-for」、「資料綁定」嗎？接下來會用到它們喔！

Component： https://ithelp.ithome.com.tw/articles/10202766
v-for：https://ithelp.ithome.com.tw/articles/10202408
資料綁定： https://ithelp.ithome.com.tw/articles/10201593

先說明一下我要做的結構，我建立一個component並在裡面加入一個按鈕，按下後會觸發父層的「函式」把「陣列資料」從父層傳回子層，來看看下面的範例吧：

父層

<template>
  <div id="app">
    <h1>父層藏好料</h1>
    <child @hungry="hungry" :dinner="dinner" />
  </div>
</template>

<script>
  import child from '../components/child'
  export default {
    components: {
      child
    },
    data() {
      return {
        dinner:[]
      }
    },
    methods: {
      hungry() {
        alert('你的晚餐來了！')
        return this.dinner = ['漢堡','薯條','炸雞','可樂']
      }
    }
  }
</script>

<style>
#app {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
}
</style>

子層

<template>
  <div id="child">
    <h3>子層伸手要</h3>
    <button @click="$emit('hungry')">好餓喔！！</button>
    <ul>
      <li v-for="item in dinner" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: {
      dinner: {
        type: Array,
        required: true
      }
    }
  }
</script>

<style scoped>
  #child {
    padding: 20px;
    border: 1px solid #cccccc;
    width: 500px;
  }
  button {
    margin-bottom: 15px;
  }
  ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 0;
    margin: 0;
  }
  li {
    display: inline-block;
    margin: 10px;
  }
</style>

父層範例可以看到：

• 引用<child />components進來頁面，接著綁入@hungry「自定義事件」並執行hungry「函式」，然後再綁入dinner資料。
• 有要用資料，當然在data()裡就要有個位置存放它！而預設是沒資料的，所以給空陣列，因為我要等按按鈕後才給。
• methods內寫入hungry()函式，裡面會先跳alert訊息，接著回傳「陣列資料」。

子層範例可以看到：

• <button @click="$emit('hungry')">我對按鈕綁了click事件，$emit發起hungry自定義事件。
• 綁入v-for在<li>上。
• 剛有綁dinner資料到子層，那子層就要用props接收。

完成，結果就會是按下子層components裡的按鈕後，會發起自定義事件hungry用來執行父層頁面的hungry函式，此函式會先跳alert訊息，接著回傳「陣列資料」進components給裡面的<li>使用。

這個範例裡的觀念實做上很常會用到喔~