vue子组件向父组件传递数据

vue官网中介绍父子组件通讯方式是经过自定义事件,在这里我有一个比较特殊的方法,能够将子组件中的数据传递给父组件,主要思路是在子组件中定义一个方法A,在这个方法中返回return想要传递给父组件的数据,而后在父组件中经过$refs调用子组件的方法A。(未完待续...稍后上代码...)vue

子组件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子组件传递过来的数据,效果以下
图片描述app

相关文章
相关标签/搜索