子元件child.vue原始碼：

<template>
  <div class="child">
    <button @click="sendData">點擊向父元件傳資料</button>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      msg: '子元件資料'
    }
  },
  methods: {
    sendData() {
      this.$emit('childHadSend', this.msg)
    }
  }
}
</script>

<style>

</style>
 

父元件原始碼：

<template>
  <div id="app">
    <child @childHadSend="getData"></child>
   <p>{{childData}}</p>
  </div>
</template>

<script type="text/ecmascript-6">
  import Child from 'components/child/child'
  export default {
    data() {
      return {
        childData: ''
      }
    },
    methods: {
      getData(data) {
        this.childData = data
      }
    },
    components: {
      Child
    }
  }
</script>

<style>
</style>
 

點選button後的執行結果：