vue子組件向父組件傳遞數據

vue官網中介紹父子組件通訊方式是經過自定義事件，在這裏我有一個比較特殊的方法，能夠將子組件中的數據傳遞給父組件，主要思路是在子組件中定義一個方法A，在這個方法中返回return想要傳遞給父組件的數據，而後在父組件中經過$refs調用子組件的方法A。（未完待續...稍後上代碼...）

子組件header.vue代碼
    export default {
        data() {
            return {
                childData:'我是子組件傳回來的數據'
            }
        },

        methods: {
            returnData: function() {
                return this.childData
            }
        }
    }

父組件代碼
<template>
  <div id="app">
    <v-header  ref="headerCom"></v-header>
  </div>
</template>

<script>
    import header from '@/components/header'
export default {
  components: {
      'v-header':header
  },
  mounted: function(){
  alert(JSON.stringify(this.$refs.headerCom.returnData()));
  }
}
</script>

只要父組件加載完畢就會alert子組件傳遞過來的數據，效果以下