既然做了這麼多組件，把組件們結合成一個成品是一定要的，組件與組件間的資料溝通使用的是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傳遞邏輯的初略認識，下篇繼續做深入學習