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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信

    最近在学习vue组件鸡组件之前通信问题,正好看到,以此来留作笔记. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue2-单一事件管理组件通信</title> <script src="vue.js"></script> <script type=

  • vue中的$emit 与$on父子组件与兄弟组件的之间通信方式

    本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输. 主要的传输方式有三种: 1.父组件到子组件通信 2.子组件到父组件的通信 3.兄弟组件之间的通信 一.父组件传值给子组件 父组件给子组件传子,使用props //父组件:parent.vue <template> <div> <child :vals = "msg"></child> </div> </template> <script&

  • 基于vue 兄弟组件之间事件触发(详解)

    直奔主题! 兄弟组件之间的事件触发,大概思路是通过父级组件交换数据,watch来监听触发事件. 场景是父级组件A同时引用两个子级组件B,C.点击B组件中的按钮执行C组件中的事件. 第一步:父级组件A <bottom-play :play="playStatus" @playStatus="btmChild"></bottom-play> methods:{ listChild:function(val){//B组件自定义事件 状态是布尔值 t

  • Vue 兄弟组件通信的方法（不使用Vuex）

    Vue 兄弟组件通信的方法（不使用Vuex）

    项目中,我们经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入vuex.下面简单介绍一下使用传统方法,实现父子组件通信的方法. 简单实例:我们在a组件中点击按钮,将信息传给b组件,从而使b组件弹出. 主要的思路就是:先子传父,在父传子 首先我们在 a.vue 组件中 ,给按钮botton绑定一个handleClick事件,事件中我们通过 this.$emit() 方法去触发一个自定义事件,并传递我们的参数. 示

  • vue2.0 兄弟组件(平级)通讯的实现代码

    1.前戏吧 先看看前两篇文章: 父组件传给子组件 子组件传给父组件 看图 看图 看图!!! 个人理解: 这明显是生活中弟弟打电话哥哥一样,双方都需要手机,需要信号发射塔. 弟弟 => A组件 哥哥 => B组件 弟弟的手机 => $emit发送数据 哥哥的手机 => $on监听并接收数据 信号发射塔 => 中间事件线 App.vue => 不用说都知道是地球 2. 代码 2.1.在src/asstes下新建中间事件线ligature .js (注意后缀.js) impo

  • vue2.0s中eventBus实现兄弟组件通信的示例代码

    vue1.0中,组件之间的通信主要通过vm.$dispatch沿着父链向上传播和用vm.$broadcast向下广播来实现.然而在vue2.0中,已经废除了这种用法. vuex加入后,对组件之间的通信有了更加清晰的操作,对于中大型的项目来说,一开始就把vuex的使用计划在内是明智的选择. 然而在一些小型的项目,或者说像我这样写到一半才发现vue2.0用不了$.broadcast和$dispatch的人来说,就需要一个比较便捷的解决方法.那么,eventBus的作用就体现出来了. 主要是现实途径是

  • Vue.js中兄弟组件之间互相传值实例

    兄弟组件之间互相传值,需要建立一个"中转站"(新的vue实例),并且需要主动触发. 实例上的$on方法来接受监听. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件传值</title> <script src="vue.js"></script

  • vue中子组件调用兄弟组件方法

    小计: 开发中遇到子组件需要调用兄弟组件中的方法,如下写个小demo记录下心得,如果你有好的方法,请到评论区域指教 父组件示例代码: 组件功能解析:  通过$emit获取子组件事件,通过$ref调用子组件中事件,实现子组件二的click事件 调用兄弟组件一中的事件 <template> <div> <!-- 子组件1 --> <son1 ref="borther" :dataFromFather="dataFromFather&quo

  • Vue中子组件调用父组件的3种方法实例

    目录 1.直接在子组件中通过“this.$parent.event”来调用父组件的方法. 2.子组件用“$emit”向父组件触发一个事件,父组件监听这个事件即可. 3.父组件把方法传入子组件中,在子组件里直接调用这个方法即可. 总结 Vue中子组件调用父组件的三种方法: 1.直接在子组件中通过“this.$parent.event”来调用父组件的方法. 父组件 <template> <div> <child></child> </div> <

  • 关于vue父组件调用子组件的方法

    组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素. 所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子. 我们都知道通过$ref可以获取到某个DOM,但是它也可以用来获取子组件的实例,调用子组件的方法 例: 子

  • vue 使用ref 让父组件调用子组件的方法

    父级组件上的三个按钮可以 调用子组件loading的三个方法,执行不同的操作 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue.js" charset="utf-8"></script> </head> <body> <div id="app&qu

  • Vue父组件调用子组件事件方法

    Vue父组件向子组件传递事件/调用事件 不是传递数据(props)哦,适用于 Vue 2.0 方法一:子组件监听父组件发送的方法 方法二:父组件调用子组件方法 子组件: export default { mounted: function () { this.$nextTick(function () { this.$on('childMethod', function () { console.log('监听成功') }) }) }, methods { callMethod () { con

  • vue 父组件调用子组件方法及事件

    情景: 父组件中引入上传附件的子组件:点击组件可以分别上传对应要求的图片,子组件内部循环可创建多个模块. 父组件传入数组子组件循环来创建不同的组件模块,所有事件都在子组件内部. 父组件页面的上方同时有一个上传图片按钮上传图片后会显示在第一个模块: 设想思路:点击父组件中的按钮触发子组件中上传方法: 子组件上定义ref="refName",父组件的方法中用this.$refs.refName.method去调用子组件方法 子组件中处理上传的方法: fileClick(index) { c

  • Vue子组件向父组件通信与父组件调用子组件中的方法

    Vue子组件向父组件通信与父组件调用子组件中的方法

    子组件向父组件通信 子组件的button按钮绑定点击事件,事件方法名为sendToParent(), 该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg); 在父组件引入子组件,并给cus-event事件绑定doAction($event)方法,该方法中this.msg = e;console.log(e), 而msg已经在data中声明,其值为"子级消息",故最终的输出结果为: 展示父级接收到的消息:子级消息 父组件调用子组件

  • Vue组件间通信方法总结（父子组件、兄弟组件及祖先后代组件间）

    Vue组件间通信方法总结（父子组件、兄弟组件及祖先后代组件间）

    前言 除了使用 Vuex 方法外,vue 提供了各种各样的组件间通信的方案.文章整理一下父子组件.兄弟组件.祖先后代组件间是如何通信的.

  • Vue子组件调用父组件方法案例详解

    一.直接在子组件中通过this.$parent.event来调用父组件的方法 <!-- 父组件 --> <template> <div> <child></child> </div> </template> <script> import child from '~/components/dam/child'; export default { components: { child }, methods: {

  • Vue中一个组件调用其他组件的方法详解(非父子组件)

    目录 前言 方式一:引用式 方式二:vuex 1.src/store/index.js 2.被使用组件- A 页面(组件) 3.使用触发页面-B 页面(组件) 方式三:使用事件总线eventBus定义全局事件 1.src/main.js 2.触发页面-B组件/发布事件 3.接收页面-A组件/订阅事件 4.移除事件 总结 前言 Vue中,一个组件调用其他组件的方法(非父子组件) 场景——B页面(组件)想调用 A页面(组件)中的方法:但是两个页面(组件)毫无关联(刷新 A的数据). 方式一:引用式

随机推荐