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>

三、效果展示