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 相关文章推荐
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
JavaScript中textRange对象使用方法小结
Mar 24 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 Javascript
Javascript实现基本运算器
Jul 15 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
layer实现弹出层自动调节位置
Sep 05 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
Nov 16 Javascript
vue+element实现动态加载表单
Dec 13 Vue.js
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 INI配置文件的解析实现分析
2011/01/04 PHP
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
php去除数组中重复数据
2014/11/18 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
javascript编程起步(第三课)
2007/02/27 Javascript
IE和Firefox下event事件杂谈
2009/12/18 Javascript
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
详解VueJS应用中管理用户权限
2018/02/02 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
python使用win32com库播放mp3文件的方法
2015/05/30 Python
Python科学画图代码分享
2017/11/29 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
python实现简单图书管理系统
2019/11/22 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
浅谈Python 参数与变量
2020/06/20 Python
python实现无边框进度条的实例代码
2020/12/30 Python
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
美国保健品专家:Life Extension
2018/05/04 全球购物
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
办公室主任竞聘演讲稿
2014/05/15 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
小王子读书笔记
2015/06/29 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
python 使用pandas读取csv文件的方法
2022/12/24 Python