Vue專案中經常使用到元件之間的數值傳遞，實現的方法很多，但是原理基本上大同小異。
子元件向父元件出傳遞資料，使用自定義事件的方式。
父元件向子元件傳遞資料，使用props屬性的方式。
推薦文章：Vue筆記——子元件向父元件傳遞資料

一、父元件中動態繫結資料到子元件

父元件向子元件傳遞資料，首先要在父元件中使用v-bind命令將要傳遞的資料繫結到子元件上。比如我們要從父元件中給子元件傳遞兩條資料，示例程式碼如下：

<template>
  <div id="app">
    <!-- 使用v-bind命令將父元件中的資料繫結到子元件上 --
 
>
    <Child v-bind:val_1="value_1" v-bind:val_2="value_2"></Child>
  </div>
</template>

<script>
  import Child from './components/Child.vue'

  export default {
    name: 'App',
    components: {
      Child
    },
    data: function () {
      return {
        value_1:
 
 "父元件中的資料1",
        value_2: "父元件中的資料2"
      }
    }
  }
</script>

<style>
  
</style>

二、子元件中接收傳遞過來的資料

父元件中完成資料繫結之後，在子元件中的props屬性接收一下父元件傳遞過來的資料，要接收多少資料，就在pros屬性中寫多少資料。比如要接收兩條資料，示例程式碼如下：

<template>
  <div class="Child">
    <h1>{{ val_1 }}</h1>
    <
 
h1>{{ val_2 }}</h1>
  </div>
</template>

<script>
  export default {
    name: 'Child',

    // 在props屬性裡接收父元件傳遞過來的資料
    props: ["val_1", "val_2"]
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

三、效果展示