子组件向传父组件传值

子组件

<!-- child.vue -->

<template>

  <div>

    <h2>我是子组件</h2>

    <!-- 点击把数据传递给父组件 -->

    <a href="JavaScript:;" @click="send">点我通信</a>

  </div>

</template>

<script>

export default {

  data() {

    return {

      childData: '我是子组件的数据'

    }

  },

  methods: {

    send() {

      /*

              需求：点击发送数据到父组件

              this.$emit()传递数据到父组件

              this.$emit('自定义事件名称', 要传递给父组件的数据)

              this.childData相当于函数中的实参

          */

      this.$emit('customEvent', this.childData)

    }

  }

}

</script>

 父组件

<!-- parent.vue -->

<template>

  <div>

    <h1>我是父组件</h1>

    <hr />

    <!-- 这里要调用子组件

      @customEvent="parentReceive"

        customEvent：子组件中this.$emit()的第一个参数，这个是自定义的事件名

        parentReceive：就是正常的方法了

      -->

    <child @customEvent="parentReceive" />

  </div>

</template>

<script>

// 第一步：导入组件

import Child from './child'

export default {

  // 第二步：注册组件

  components: {

    Child

  },

  data() {

    return {}

  },

  methods: {

    // val相当于函数中的形参，val就是子组件传递过来的数据

    parentReceive(val) {

      console.log(val)

    }

  }

}

</script>