vue子组件给父组件传值

子组件ChildA.vue 

<template>
  <div class="ChildA">
      <button @click="sendData">ChildA</button>
  </div>
</template>

<script>
export default {
  name: 'ChildA',
  data() {
      return {
          mes: "ChildA's message",
      };
  },
  methods: {
      sendData () {
          this.$emit('func', this.mes);
          //$emit的第一个参数指定负责传递数据的函数名，第二个参数指定要传递的数据
          //此处this.mes将作为func函数的参数传递给父组件
          //第一个参数叫什么都可以，只要和父组件中保持一致即可
      }
  }
}
</script>

父组件App.vue

<template>
  <div id="app">
    <ChildA @func="receiveData" />
    <!-- 表示子组件$emit语句中指定用来传递数据的函数func在父组件中实际指的是receiveData函数 -->
    <!-- 其中@是v-on:的简写 -->
  </div>
</template>

<script>
import ChildA from './components/ChildA.vue'
export default {
  name: 'App',
  data () {
    return {
      message: "",
    };
  },
  components: {
    ChildA,
  },
  methods: {
    receiveData (val) {//实际调用时val即为$emit语句中的第二个参数，也即子组件传给父组件的数据
      this.message = val;
      console.log(this.message);
    },
  },
}
</script>