【Vue.js】组件之间互相调用彼此的方法，子调父，父调子

本文主要是介绍【Vue.js】组件之间互相调用彼此的方法，子调父，父调子，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

概述

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

父组件调用子组件方法

1. 首先被父组件调用的子组件方法定义一下

   appendToTree({param}){console.log('这是子组件tree的方法')
   },

    

2. 父组件parent.vue中的子组件加一个ref属性，就相当于给这个子组件取了一个别名。注意，这个是加在需要调用的子组件上的

   <treeModel ref="tree"></treeModel>

    

子组件调用父组件方法

1. 在子组件上添加一个事件（或者别名？对前端的专业术语不了解），名字随便取，值是准备调用的父组件方法

   <child @parentFn="childTreeFn"></child >

    

2. 在子组件中通过$.emit方法来调用父组件的方法

   //子组件的方法名，随便取
   submit() {//因为要调用的是事件为parentFn，后面跟上参数this.$emit('parentFn',{param:this.argument});
   },

    

这篇关于【Vue.js】组件之间互相调用彼此的方法，子调父，父调子的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---