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函数返回多个返回值的示例代码
Nov 05 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
Sep 01 Javascript
Javascript动画效果(2)
Oct 11 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
Javascript中prototype与__proto__的关系详解
Mar 11 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
js实现的订阅发布者模式简单示例
Mar 14 Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 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
php文件怎么打开 如何执行php文件
2011/12/21 PHP
php中检查文件或目录是否存在的代码小结
2012/10/22 PHP
php递归方法实现无限分类实例代码
2014/02/28 PHP
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
php表单提交实例讲解
2015/11/12 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
php上传excel表格并获取数据
2017/04/27 PHP
50个比较实用jQuery代码段
2011/09/18 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
JSONP跨域请求
2017/03/02 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
基于Python 装饰器装饰类中的方法实例
2018/04/21 Python
python实现飞机大战
2018/09/11 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
python实现低通滤波器代码
2020/02/26 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
质检部经理岗位职责
2014/02/19 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript