关于vue中父组件调用子组件的方法

以子组件刷新页面的方法，在父组件中调用子组件刷新页面方法为例

子组件页面-----》EditList：

<template>
  <div class="editList">
    <el-button type="primary" @click="clickMe">我是子组件</el-button>
  </div>
</template>

<script>
export default {
  name: 'EditList',
  data(){
    return {
    }
  },
  methods:{
    clickMe(){
      this.sonFn()
    },
    sonFn(){
      this.$router.go(0)
    }
  }
}
</script>

父组件页面-----》list：

<template>
  <div class="list">
      <h3>父组件页面</h3>
      <el-button type="success" @click="toClick">点我调用子组件方法</el-button>
       <!-- 3、使用子组件 -->
      <EditeList ref="childEvent"/>
  </div>
</template>

<script>
// 1、引入子组件
import EditeList from '@/components/EditList'
export default {
  name: 'List',
  data(){
    return {
    }
  },
  methods:{
    toClick(){
    	// 父组件页面调用子组件方法
      	this.$refs.childEvent.sonFn();
    }
  },
  components:{
    // 2、注册子组件
    EditeList
  }
}
</script>