【Vue.js】兄弟组件之间调用对方的方法

2023年1月26日12:26:11

参考:Vue兄弟组件之间如何调用对方的方法

概述

兄弟组件之间的通讯有一个方法是通过父组件进行交互,那么解决的思路就是子组件调用父组件的方法,然后父组件调用另一个子组件的方法,这样就实现了兄弟组件的交互功能。

父组件调用子组件方法

  1. 首先被父组件调用的子组件方法定义一下
appendToTree({param}){
   console.log('这是子组件tree的方法')
},
  1. 父组件parent.vue中的子组件加一个ref属性,就相当于给这个子组件取了一个别名。注意,这个是加在需要调用的子组件上的。
<treeModel ref="tree"></treeModel>
  1. 父组件的方法中通过this.$refs的方式来调用子组件的方法
//这个是父组件的方法,名字随便定义
childTreeFn({param}){
    console.log('参数',param)
    //因为要调用的是别名为tree的子组件中定义的appendToTree方法,所以就这么写
    this.$refs.tree.appendToTree({param});
}

子组件调用父组件方法

  1. 在子组件上添加一个事件(或者别名?对前端的专业术语不了解),名字随便取,值是准备调用的父组件方法
<child @parentFn="childTreeFn"></child >
  1. 在子组件中通过$.emit方法来调用父组件的方法
//子组件的方法名,随便取
submit() {
    //因为要调用的是事件为parentFn,后面跟上参数
    this.$emit('parentFn',{param:this.argument});
},

  • 作者:ColdFireMan
  • 原文链接:https://blog.csdn.net/ColdFireMan/article/details/82260039
    更新时间:2023年1月26日12:26:11 ,共 670 字。