iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 26
0
自我挑戰組

從0開始vue.js的30天學習日誌系列 第 26

26 Vue組件 - 組件資料傳遞、組件結合

既然做了這麼多組件,把組件們結合成一個成品是一定要的,組件與組件間的資料溝通使用的是props$emit,從今推算後的幾天會留在這塊滿長一段時間...(反覆看了教學頭腦打結再加上怎麼才幾天幾個禮拜前學的東西好像都忘光了...)。
mm...今天學習使用組件做一個todolist,然後會稍微提到提到props$emit,後面幾天再做比較深入的學習。

重點提醒:

上層要傳資料下去是使用props的方式,下層要傳資料到上層是發出$emintevent。


程式碼:
以todo-list作為主要父組件,用HTML模板輸出:

  <div id="app">
    <todo-list></todo-list>
  </div>

這邊分成四部分:

  • 主要父組件 - todo-list註冊
  • 子組件 - todo-input 註冊 (輸入框)
  • 子組件 - todo-item 註冊 (列表)
  • 建立Vue實例

父組件包了todo-input及todo-item兩個子組件,todo-input內容是輸入框項及submit按鈕,組件中需使用$emit event把使用者輸入的值傳遞到父組件;todo-item內容是由父組件的data跑迴圈生成的,因此每當使用者輸入新的待辦事項,todo-input 透過 $emit event 傳遞資料到父組件後,父組件將這筆資料加入data中,data更新後使用props將資料傳入綁定的todo-item組件內。

<script>
//---Component todo-input
  Vue.component('todo-input', {
    data() {
      return {
        text: '',
      };
    },
    methods: {
      submit() {
        this.$emit("input", this.text);
        this.text = "";
      }

    },
    template: `
    <form @submit.prevent="submit">
      <input type="text" v-model="text"/>
      <button type="submit">submit</button>
    </form>
    `
  });
  
  //---Component todo-item
  
  Vue.component('todo-item', {
    props: ['label'],
    template: '<li>{{label}}</li>'
  });
  
  //---Component todo-list
  
  Vue.component('todo-list', {
    data() {
      return {
        todos: ["a", "b", "c"],
      };
    },
    methods: {
      addTodo(text) {
        this.todos.push(text);
      }
    },
    template: `
    <div>
      <todo-input @input="addTodo"></todo-input>    
    <ul>
      <todo-item v-for="todo in todos" :label="todo"></todo-item>
    </ul>
  </div>`
  });
  
  //---Vue instance
  
  new Vue({
    el: "#app"
  });
</script>

以上為props$emit傳遞邏輯的初略認識,下篇繼續做深入學習/images/emoticon/emoticon02.gif


上一篇
25 Vue組件 - 動態切換
下一篇
27 Vue組件 - props (1)
系列文
從0開始vue.js的30天學習日誌30

尚未有邦友留言

立即登入留言