埋坑一： vue中子组件调用兄弟组件方法

小计：开发中遇到子组件需要调用兄弟组件中的方法，如下写个小demo记录下心得，如果你有好的方法，请到评论区域指教

父组件示例代码：

组件功能解析： 通过$emit获取子组件事件，通过$ref调用子组件中事件，实现子组件二的click事件调用兄弟组件一中的事件

<template><div><!-- 子组件1 --><son1 ref="borther" :dataFromFather="dataFromFather"></son1><!-- 子组件2 --><son2 @triggerBrotherMethods="triggerBrotherMethods" :dataFromFather="dataFromFather"></son2></div>
</template><script>
// 引入子组件一
import son1 from './son1'
// 引入子组件二
import son2 from './son2'export default {data() {return {dataFromFather: []}},// 注册子组件components: {son1,son2},methods: {// 子组件2中click事件triggerBrotherMethods() {// 父组件通过$ref调用子组件1中的事件方法this.$refs.borther[0].bortherMethods()},}
}
</script><style lang="less" scoped>
/* .... */
</style>

子组件一

组件功能解析： 加载父组件数据，进行业务操作

<template><!-- 子组件son2 --><div @click="bortherMethods"><!-- 父组件传值展示 -->{{dataFromFather}}</div>
</template><script>
export default {data() {return {}},props: ['dataFromFather'],methods: {// 兄弟组件中的按钮事件bortherMethods() {// 子组件事件方法...},}
}
</script><style lang="less" scoped>
/* .... */
</style>

子组件二：

组件功能解析： 加载父组件数据，通过click事件emit传给父组件

<template><!-- 子组件son2 --><div @click="triggerBrotherMethods"><!-- 父组件传值展示 -->{{dataFromFather}}</div>
</template><script>
export default {data() {return {}},props: ['dataFromFather'],methods: {// 触发兄弟组件中的按钮事件triggerBrotherMethods() {this.$emit('clickBrotherBtn', true)},}
}
</script><style lang="less" scoped>
/* .... */
</style>

埋坑一： vue中子组件调用兄弟组件方法相关推荐

iframe调用父页面方法_5.1 vue中子组件调用父组件的方法，务必理解自定义事件的重要性...
问题:vue中子组件调用父组件的方法通过v-on 监听和$emit触发来实现: 1.在父组件中通过v-on 监听当前实例上的自定义事件. 2.在子组件中通过'$emit'触发当前实例上 ...
vue 踩坑--父组件调用子组件方法，报错
父组件,调用子组件的方法,报如下错误分析解决:1.可能子页面加载未完成,父组件调用子组件方法加延时处理 setTimeout(() => {this.$refs.notice.getInfo( ...
vue 子页面调用父页面的参数_Flutter子组件调用父组件方法修改父组件参数
子组件调用父级组件方法的主要实现是父组件给子组件传入一个方法,然后在子组件中调用父级方法来修改父级的参数.看一下效果图父级组件实现在父级组件中写一个_editParentText的方法来修改组件中 ...
【Day13】说一下 Vue 组件的通信方式都有哪些？（父子组件，兄弟组件，多级嵌套组件等等）
说一下 Vue 组件的通信方式都有哪些?(父子组件,兄弟组件,多级嵌套组件等等) 一.父组件向子组件传值二.子组件向父组件传值三.兄弟组件传值四.跨组件一.父组件向子组件传值 1.1 prop ...
vue中组件之间调用方法——子组件调用父组件的方法父组件调用子组件的方法
vue中组件之间调用方法--子组件调用父组件的方法 & 父组件调用子组件的方法 1.vue中子组件调用父组件的方法 1.1.第一种方法是直接在子组件中通过this.$parent.event来 ...
Vue组件传值——兄弟组件传值
兄弟组件传值兄弟组件之间彼此没有联系,它们需要通过中间Vue实例对象bus(快递员)进行数据传递. 1. 声明事件给组件实例(或Vue实例) 声明事件有两种方式: 直接声明通过$on实现给组件 ...
VUE 父子组件、兄弟组件之间通信最强详解
目录 1. 父组件调用子组件内参数/方法 1.1 通过 ref 调用/获取子组件内参数/方法 2. 子组件调用父组件内参数/方法 2.1 通过 emit 调用父组件方法 2.2 通过 ...
Vue父组件调用子组件的方法并传参的两种方式（用$refs.refName.functionName、window.function）
如需了解儿子怎么控制老子的,传送门:https://s-z-q.blog.csdn.net/article/details/120094689 父组件father.vue <template&g ...
vue父组件调用子组件的方法
vue组件与组件通信有如下几种情况: 平行组件父组件与子组件子组件与父组件它们之间通信有几种方法有: props 自定义事件 vuex 今天我们聊一下父组件调用子组件的一种方法 parent.v ...

埋坑一： vue中子组件调用兄弟组件方法

埋坑一： vue中子组件调用兄弟组件方法相关推荐

最新文章

热门文章