vue中三种方式：子传父数据

App.vue中代码
-------------------
<template>
  <div id="app">
    <HelloWorld :getson="getson" @getsondata="getson2"   ref="Univer"/>
    <!--this.$ref.helloworld-->
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
      HelloWorld,
  },
  methods:{
      getson(name){
          console.log('方式1获得了子类传过来的的值：'+name)
      },
      getson2(name){
          console.log('方式2获得了子类传过来的的值：'+name)
      },
      getson3(name){
          console.log('方式3获得了子类传过来的的值：'+name)
      }
  },
  mounted(){
      this.$refs.Univer.$on('getsondata3',this.getson3)
  }
}
</script>
<style>
</style>

HelloWorld.vue组件中代码：
<template>
  <div class="hello">
    <!--方式一-->
    <button @click="sendinfo">子传父方式1(小明)</button>
    <!--方式二-->
    <button @click="sendinfo2">子传父方式2(狗蛋)</button>
    <!--方式三-->
    <button @click="sendinfo3">子传父方式3(Gjanuary)</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: ['getson'],
  data(){
    return {
       name:'小明',
       name2:'狗蛋',
       name3:'Gjanuary'
    }
  },
  methods:{
      sendinfo(){
          this.getson(this.name)
      },
      sendinfo2(){
          this.$emit('getsondata',this.name2)
      },
      sendinfo3(){
           this.$emit('getsondata3',this.name3)
      }
  }
}
</script>

<style scoped>

</style>