子组件代码

<template>
  <div>
    <h2>child子组件部分</h2>
    <p>{{message}}</p>
    <button v-on:click="sendMsgToParent">向父组件传值</button>
  </div>
</template>

<script>
export default {
  props : ["message"],
  data () {
    return {

    }
  },
  methods:{
    sendMsgToParent:function () {
      this.$emit("listenToChildEvent","传值内容")
    }
  }
}
</script>

<style scoped>

</style>

父组件代码

<template>
  <div>
    <h2>parent父组件部分</h2>
    <child v-bind:message="parentMsg" v-on:listenToChildEvent="showMsgFromChild"></child>
  </div>
</template>

<script>
  import child from './Child'

export default {
  data () {
    return {
      parentMsg:'hello'
    }
  },
  components : {
    child
  },
  methods:{
    showMsgFromChild:function (data) {
      console.log(data);
    }
  }
}
</script>

<style scoped>

</style>