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


Posted in Javascript onJuly 06, 2018

小计: 开发中遇到子组件需要调用兄弟组件中的方法,如下写个小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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS常见问题整理(持续更新)
Aug 06 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
JS三级可折叠菜单实现方法
Feb 29 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
vue最简单的前后端交互示例详解
Oct 11 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
浅谈vue权限管理实现及流程
Apr 23 Javascript
js实现微信聊天效果
Aug 09 Javascript
Openlayers测量距离与面积的实现方法
Sep 25 Javascript
vue中element 上传功能的实现思路
Jul 06 #Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 #Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 #Javascript
微信小程序利用canvas 绘制幸运大转盘功能
Jul 06 #Javascript
用Node提供静态文件服务的方法
Jul 06 #Javascript
vue使用监听实现全选反选功能
Jul 06 #Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 #Javascript
You might like
杏林同学录(五)
2006/10/09 PHP
php 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
PHP 函数语法介绍一
2009/06/14 PHP
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
php技巧小结【推荐】
2017/01/19 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
event对象的方法 兼容多浏览器
2009/06/27 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
深入了解javascript中的prototype与继承
2013/04/14 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
AngularJS实现根据变量改变动态加载模板的方法
2016/11/04 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
2017/08/15 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
工作检讨书大全
2015/01/26 职场文书
超级礼物观后感
2015/06/15 职场文书
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技