vue.js 中兄弟组件方法调用文章来源：https://www.toymoban.com/news/detail-635817.html
场景：父组件中同时引入两个子组件（A和B），此时B组件点击按钮需要调用A组件里面的方法
方案1：vue的事件总线
方案2：自定义事件（$emit）
最终方案：方案2文章来源地址https://www.toymoban.com/news/detail-635817.html
父组件
- 具体操作
- B组件上添加一个自定义的事件，这个是B组件传递给父组件的 @getList=getlist
- A组件上添加 ref 属性 ref=‘componenta’
- 添加 getList方法
<template>
<div class="container">
<component-a ref="componenta"/>
<component-b @getList="getList"/>
</div>
</template>
<script>
export default {
methods:{
getList() {
// 这是关键
this.$refs.componenta.testA();
}
}
}
</script>
B组件
- 具体操作
- 使用$emit给父组件发送事件
<template>
<div class="container">
<button @click="test"> 调用A组件里面的方法 </button>
</div>
</template>
<script>
export default {
methods:{
test() {
this.$emit("getList");
}
}
}
</script>
A组件
<template>
<div class="container">
AAAAAAAA
</div>
</template>
<script>
export default {
methods:{
testA() {
console.log("AAAAAAA")
}
}
}
</script>
到了这里，关于vue.js兄弟组件方法调用b组件调用a组件方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
