vue 父组件点击调起子组件的方法

前言：最近在做管理系统，页面基本都是组件模块化，如果遇到点击父组件里的一个事件要调取子组件里的方法该怎么实现，上代码（仔细看注释说明）。

父组件

//如果我们单纯的只是想调取子组件的方法--方法一
//如果我们想调取子组件又要传值的方法--方法二

<el-tabs v-model="tabType" @tab-click="handleClick"> <!-- handleClick为父组件的点击事件  -->
    <el-tab-pane v-for="(item,index) in tabList" :key="index" :label="item.name" :id="item.id"></el-tab-pane>
</el-tabs>

<!-- 下面的是我们在父组件里面引入的子组件（用ref绑定一个自定义名） -->

<el-aside width="300px" v-if="tabId !== ''">
   <video-tree ref="editTree" :type="1" :tabId="tabId" @success="treeSuccess" @totalPages="totalPage" @totalElements="totalElement"/>
</el-aside>

<!-- 下面是js代码 -->

//方法一       
 handleClick() { //这里的editTree是刚刚我们定义的ref,后面的callMethod是方法名（自定义）
   this.$refs.editTree.callMethod();
 },
//方法二

 handleClick() { //这里的用$emit
  this.$refs.editTree.$emit('callMethod','要发送的数据')
 },

子组件

methods:{
    //方法一
    callMethod(){ //这里是我们在父组件定义的方法
        this.getList() //这里是你想要调起的子组件的方法
    },
    
    //方法二
    getFunc(){ //写一个方法在初始化的时候调用一下
        this.$on('callMethod', (res) => {  //callMethod我们在父组件定义的方法名 
              this.getList(res) //这里是你想要调起的子组件的方法并传进带过来的数据                  
        },
}

mounted(){
    this.getFunc()
}

注释写的很明白不懂的一定要多看下注释，希望能帮到各位~

end~~~

如有错误或观点不一致的请评论留言共同讨论，本人前端小白一枚，根据自己实际项目遇到的问题进行总结分享，谢谢大家的阅读！
文章对您有所帮助请给作者点个赞支持下，谢谢~