iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 26
0

來到第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>使用。

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


上一篇
Vue[25]-過濾器Filter
下一篇
Vue[27]-資料驅動畫面
系列文
網頁設計靠 Vue.js 轉前端30

尚未有邦友留言

立即登入留言