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

一、在子元件中自定義事件

我們可以從子元件中想父元件中傳遞多個數據，在子元件中要做的工作只是，使用this.$emit()命令來自定義一個事件。該命令可以傳遞多個引數：

• 第一個引數是自定義事件的名字，是必須的
• 後面的引數是從子元件傳遞給父元件的資料，是可選的。要傳遞幾個資料，就將這幾個資料作為引數放進該命令中。

例如，我們要在子元件中自定義一個update事件，通過該事件向父元件傳遞兩條資料，使用的程式碼如下：

this.$emit("update",this.passDate1,this.passDate2)

這裡給出一個具體的例項：在子元件Child.vue中，定義了一個事件，子元件建立完成之後，向父元件傳遞鏈條資料。子元件Child.vue的完整程式碼如下：

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

<script>
  export default {
    name: 'Child',
    data() {
      return {
        message: "我是子元件中的數值",
        passDate1: "我是子元件傳遞到父元件的數值1",
        passDate2: "我是子元件傳遞到父元件的數值2"
      }
    },
    created: function () {
      // 元件建立完成之後，自定義事件，向父元件傳遞資料
      this.$emit("update", this.passDate1, this.passDate2)
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1{
    color: #000099;
  }
</style>
 

二、在父元件中註冊該事件，並繫結父元件中的方法，接收資料

在子元件中完成自定義事件之後，我們就可以在父元件中註冊該事件，並繫結到父元件中的一個方法，在該方法中，接收子元件中傳遞過來的資料。父元件的完整程式碼如下：

<template>
  <div id="app">
    <!-- 在父子元件的銜接處，繫結子元件自定義事件到父元件的函式 -->
    <Child v-on:update="receive"></Child>
    <h3>{{ value_1 }}</h3>
    <h3>{{ value_2 }}</h3>
  </div>
</template>

<script>
  // 引入子元件
  import Child from './components/Child.vue'

  export default {
    name: 'App',
    components: {
      Child    // 註冊子元件
    },
    data: function () {
      return {
        value_1: "",
        value_2: ""
      }
    },
    methods: {
      // 父元件中響應子元件自定義的方法
      // 此函方法的引數是用來接收從子元件傳遞來的資料
      // 子元件傳遞了幾個資料，這裡就有幾個引數
      receive: function (val_1, val_2) {
        this.value_1 = val_1;
        this.value_2 = val_2;
      }
    }
  }
</script>

<style>


</style>
 

三、實現效果