從一張白紙開始學習前端，掐指一算也大概一年了
但對於$Props的應用，一直無法深入理解
可能礙於本身邏輯能力較差的關係，再加上網路的文章教程都是以下這種寫法

 <script type="text/x-template" id="my-component">
    <div class="component">
      <div> ParentMsg: {{ parentMsg }} </div>   
      <div> ChildMsg: {{ msg }} </div>      
    </div>
  </script>

  <script>
 Vue.component('my-component', {
      props: ["parentMsg"],
      template: '#my-component',
      data: function () {
        return {
          msg: 'Msg of Child!'
        }
      }
    });
    new Vue({
      el: '#app',
      data: {
        msg: 'Msg of Parent!'
      }
    });
    </script>

因此一直無法去區分這種模式若改成VueCli的話該怎麼去撰寫
才決定紀錄一篇簡單的使用筆記，方便日後理解

$Props
首先我在components中新增了一個person.vue文件，並將樣板設為按鈕，並註冊name:

<template>
  <div>
    <button>{{ name }}</button>
  </div>
</template>
<script>
export default {
  props: ['name']
}
</script>

在上面的程式碼中，我們在 props 裡註冊了一個 name 的值。我們可以在模板內使用已註冊的 prop。
現在就可以透過在html tag中加入 name 屬性從 family.vue 將 name 屬性的值傳入 props：

<template>
  <div id="app" class="container">
    <h1 style="font-size:2rem">我的家人有：</h1>
    <ul>
      <li>奶奶</li>
      <li>爸爸</li>
      <li>媽媽</li>
      <li>姊姊</li>
      <li>弟弟</li>
    </ul>
    <Person name="按鈕1"></Person>
    <Person name="按鈕2"></Person>
  </div>
</template>

<script>
import Person from '@/components/person.vue'
export default {
  data () {
    return {
      value: ''
    }
  },
  components: {
    Person
  },

畫面中所顯示的樣子

接著在註冊第二個props組件名稱

<template>
  <div>
    <button @click="handleclick">{{ name }}</button>
  </div>
</template>
<script>
export default {
  props: ['name', 'handleclick']
}
</script>

再到family.vue將handleclick綁定，簡單寫兩個function方便做為輸出觀察

<template>
  <div id="app" class="container">
    <h1 style="font-size:2rem">我的家人有：</h1>
    <ul>
      <li>奶奶</li>
      <li>爸爸</li>
      <li>媽媽</li>
      <li>姊姊</li>
      <li>弟弟</li>
    </ul>
    <Person name="按鈕1" :handleclick = 'click1'></Person>
    <Person name="按鈕2" :handleclick = 'click2'></Person>
  </div>
  {{ valueStatus }}
</template>

<script>
import Person from '@/components/person.vue'
export default {
  data () {
    return {
      valueStatus: ''
    }
  },
  components: {
    Person
  },
  methods: {
    click1 () {
      this.valueStatus = '我愛爸爸!!'
    },
    click2 () {
      this.valueStatus = '我愛媽媽!!'
    }
  }
}
</script>

測試輸出結果：