昨天提到props屬性可以將外層元件的資料，傳遞到內層元件。
舉的例子是傳入特定的author字串給News元件，

但是一般來說的網頁使用情境，不太可能會把資料寫死在標籤裡XD。
比較常見的是讓使用者自己輸入，或是透過後端資料庫或API傳資料進來。

傳入子元件的資料是變數

在下列例子，我們希望News這個子元件會動態接收從Vue instance傳過去父元件姓名的值～並在子元件裡把觀眾的暱稱印出來。
該如何實作呢？

我們可以參考第5天:單向資料綁定(v-bind)與雙向事件處理(v-on)鐵人賽的範例修改、透過可以傳給子元件的props屬性把變數的值成功傳到子元件！

Step1. 在id名為content的Vue Root掛載點，利用v-bind綁定變數

昨天在子元件內是傳入無法修改的作者名稱：
<News author="Ting"></News>
今天我想換成可以讓使用者輸入的暱稱欄位
<News v-bind:nickname="name"></News>
並且跟input輸入值的做連動

html: home.html.erb

<div id="content">
  <div class="main-title">Vue.js x Rails第12屆鐵人賽專案：{{ day }}</div>
  <div class="main-body">本日主題：{{ topic }}</div>

  <News v-bind:nickname="name"></News>

  <div class="content-form">
    <div class="field is-horizontal">
      <div class="field-body">
        <div class="field">
          <p class="control">
            <input class="input" type="text" placeholder="你的暱稱" v-bind:nickname="name" v-model="name">
          </p>
        </div>
      </div>
    </div>
    <button class="button is-primary is-light" v-on:click="thankyou">送出</button>
  </div>    
  <Foot></Foot>
</div>

第5天曾經介紹過雙向事件處理時會使用到v-model以及v-on，在此一併加入例子做練習～

<!-- 表單輸入框 -->
  <input class="input" type="text" placeholder="你的暱稱" v-bind:nickname="name" v-model="name">
<!-- 按鈕 -->
  <button class="button is-primary is-light" v-on:click="thankyou">送出</button>

Step2. JS抓取Vue Root掛載點的id元素，建構一個Vue instance並新增data屬性name，並預設為空字串。

home.js

import TurbolinksAdapter from 'vue-turbolinks'
import Vue from 'vue/dist/vue.esm'
import News from "../components/news"
import Foot from "../components/foot"


Vue.use(TurbolinksAdapter)

document.addEventListener('turbolinks:load', () => {
  let el = document.querySelector("#content");

  if (el){
    new Vue({
      el,
      data: {
        day: "第 9 天",
        topic: "元件的溝通 - props (2)",
        name: ''
      },
      methods: {
        thankyou(){
          alert( `${this.name}，謝謝你收看Vue x Rails 鐵人賽系列!`)
        }
      },
      components: { News, Foot }
    })    
  }
})

Step3. 設置props

props的設置有兩種方式，array陣列以及javascript的object物件。在此例是先來個簡單的array:

<template>
  <div class="news">
    <h1>本日重點：{ {  message } } </h1>
    <i>觀眾: { { nickname } } </i>
  </div>
</template>

<script>
  export default { 
    props: ['nickname'],    
    data: function () {
      return {
        message: "由外層到內層元件的單向資料流：設定元件屬性props，並傳入變數"
      }
    }
  }
</script>

大功告成，變數成功地傳入News子元件囉。

完成圖

明天就是第十天啦（遠目），在真正開始實作Vue.js框架的Rails專案之前，還會再花個兩三天談元件之間的資料傳遞（有沒有開始覺得頭很暈啊）

這兩天了解「由外層元件到內層元件」的單向資料流傳遞，明天要來談談如何由「內層元件到外層元件」進行單向事件的傳遞，敬請期待！