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子组件传递过来的数据，效果如下