Vue笔记——子组件向父组件传递数据

Vue项目中经常使用到组件之间的数值传递，实现的方法很多，但是原理基本上大同小异。
子组件向父组件出传递数据，使用自定义事件的方式。
父组件向子组件传递数据，使用props属性的方式。
推荐文章：Vue笔记——父组件向子组件传递数据

一、在子组件中自定义事件

我们可以从子组件中想父组件中传递多个数据，在子组件中要做的工作只是，使用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>

三、实现效果