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 相关文章推荐
jquery select(列表)的操作(取值/赋值)
Aug 06 Javascript
html文本框提示效果的示例代码
Jun 28 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
angular实现商品筛选功能
Feb 01 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 19 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 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 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
php Session存储到Redis的方法
2013/11/04 PHP
jquery 常用操作方法
2010/01/28 Javascript
google 搜索框添加关键字实现代码
2010/04/24 Javascript
遍历jquery对象的代码分享
2011/11/02 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
Element Alert警告的具体使用方法
2020/07/27 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
python获取本机外网ip的方法
2015/04/15 Python
python创建进程fork用法
2015/06/04 Python
python数据结构之链表详解
2017/09/12 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
Python学习pygal绘制线图代码分享
2017/12/09 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
pytorch的batch normalize使用详解
2020/01/15 Python
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
Java如何读取CLOB字段
2013/10/10 面试题
大学生新闻专业个人自我评价
2013/11/12 职场文书
机电专业个人求职信范文
2013/12/30 职场文书
名企HR怎样看待求职信
2014/02/23 职场文书
绿色环保标语
2014/06/12 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
代理人委托书
2014/09/16 职场文书
财务工作失职检讨书
2014/11/21 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
调任通知
2015/04/21 职场文书
python控制台打印log输出重复的解决方法
2021/05/14 Python