【Vue.js】兄弟组件之间调用对方的方法
参考:Vue兄弟组件之间如何调用对方的方法概述兄弟组件之间的通讯有一个方法是通过父组件进行交互,那么解决的思路就是子组件调用父组件的方法,然后父组件调用另一个子组件的方法,这样就实现了兄弟组件的交互功能。父组件调用子组件方法首先被父组件调用的子组件方法定义一下appendToTree({param}){console.log('这是子组件tree...
·
概述
兄弟组件之间的通讯有一个方法是通过父组件进行交互,那么解决的思路就是子组件调用父组件的方法,然后父组件调用另一个子组件的方法,这样就实现了兄弟组件的交互功能。
父组件调用子组件方法
- 首先被父组件调用的子组件方法定义一下
appendToTree({param}){
console.log('这是子组件tree的方法')
},
- 父组件parent.vue中的子组件加一个ref属性,就相当于给这个子组件取了一个别名。注意,这个是加在需要调用的子组件上的。
<treeModel ref="tree"></treeModel>
- 父组件的方法中通过this.$refs的方式来调用子组件的方法
//这个是父组件的方法,名字随便定义
childTreeFn({param}){
console.log('参数',param)
//因为要调用的是别名为tree的子组件中定义的appendToTree方法,所以就这么写
this.$refs.tree.appendToTree({param});
}
子组件调用父组件方法
- 在子组件上添加一个事件(或者别名?对前端的专业术语不了解),名字随便取,值是准备调用的父组件方法
<child @parentFn="childTreeFn"></child >
- 在子组件中通过$.emit方法来调用父组件的方法
//子组件的方法名,随便取
submit() {
//因为要调用的是事件为parentFn,后面跟上参数
this.$emit('parentFn',{param:this.argument});
},
更多推荐
已为社区贡献1条内容
所有评论(0)