vue 父级调用子级组件方法

贴上学习的源码~，若不懂可以百度自行理解
父级

<template>
    <div class="home">
        <HelloWorld msg="hello" name="xiaopam" ref="myname" @fatherMethod="fatherMethodOther" :father="fatherMet" />
        <!--    方法一-->
        <game ref="mygame" @mygame_S="game_x1"></game>
        <button @click="mygame_1">方法一</button>
        <button @click="mygame_2">方法二</button>
    </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld'
import game from '@/components/game'

export default {
  data() {
    return {
      p_arrny: [1, 42,21,11,20,11,98,42,14]
    }
  },
  components: {
    HelloWorld,
    game
  },
  mounted() {
    var data = this.p_arrny;
    var sum = data.indexOf(48);
    data.splice(sum, 1);
    data=[...new Set(data)];
    data.sort(this.compart);
    console.log(data);

  },
  methods: {
    compart(x,y){
      return x-y;
    },
    mygame_1() {
      this.$refs.mygame.gameok()
    },
    mygame_2() {
      this.game_x1();
    },
    game_x1(data) {
      console.log(data)
    },


    gohome() {
      console.log('我被子组件调用')
    },
    fatherMethodOther(str) {
      console.log(str);
    },
    fatherMet(str) {
      console.log(str);
    }
  }
}
</script>

子级

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <p>{{name}}</p>
        <button @click="tohome_S">子组件</button>
    </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
    name: String,
    father:{
      type: Function,
      default: null
    }
  },
  methods: {
    name_s() {
      console.log('这是父级调用子组件的')
    },
    tohome_S(){
      this.$parent.gohome();
      this.$emit('fatherMethod', '这是emit');
      this.father('这是prop');
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    h3 {
        margin: 40px 0 0;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }
</style>