埋坑一: 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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/538327.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

nioqrc oracle,程序停在 readnocancel () from -lib-tls-libpthread.so.0

程序停在 readnocancel () from -lib-tls-libpthread.so.0(2012-04-10 23:20:56)标签&#xff1a;程序杂谈程序停在 __read_nocancel () from /lib/tls/libpthread.so.0我在 IBMBladeCenter JS21机器 (计算机集群)上 利用 MPI C 编程&#xff0c; 但出现了一些奇怪的现象。那就…

synchronized 方法 导致插入数据插不进_synchronized 原理知多少

本文转载于SegmentFault社区作者&#xff1a;ytaosynchronized是 Java 编程中的一个重要的关键字&#xff0c;也是多线程编程中不可或缺的一员。本文就对它的使用和锁的一些重要概念进行分析。使用及原理synchronized 是一个重量级锁&#xff0c;它主要实现同步操作&#xff0c…

SpringMVC源码解析(四)——请求处理

2019独角兽企业重金招聘Python工程师标准>>> 前言 这一篇&#xff0c;将着手介绍一次请求的处理。用到了 HandlerMapping、HandlerAdapter 知识&#xff0c;如果遇到不是太了解&#xff0c;可以回顾下。 源码分析 其实 DispatcherServlet 也只是 Servlet 的一个实现…

求近似数最值_干货|初中数学《数的开方》知识点梳理

本章内容课标的要求● 1.了解平方根、算术平方根、立方根的概念&#xff0c;会用根号表示数的平方根、算术平方根、立方根。● 2.了解乘方与开方互为逆运算&#xff0c;会用平方运算求百以内整数的平方根&#xff0c;会用立方运算会求百以内整数(对应的负整数)的立方根&#xf…

第三章(续)

目录 第二章 灰度变换与空间滤波(续)直方图处理与函数绘图生成直方图直方图均衡直方图匹配空间滤波线性空间滤波非线性空间滤波图像处理工具箱的标准滤波器线性空间滤波器非线性空间滤波器第二章 灰度变换与空间滤波(续) 直方图处理与函数绘图 生成直方图 应用函数 imhist 语法…

Kafka集群安装--测试--关闭

一、前提 1、kafka安装包下载&#xff1a;http://kafka.apache.org/downloads 2、jdk已安装 3、scala已安装 4、zookeeper集群已安装并运行二、步骤 1、对kafka_2.9.2-0.8.1.tgz进行解压缩&#xff1a;tar -zxvf kafka_2.9.2-0.8.1.tgz。2、对kafka目录进行改名&#xff1a;mv …

Java中的工厂模式

设计模式遵循原则 开闭原则&#xff1a;对扩展开放&#xff0c;对修改关闭里氏代换原则&#xff1a;只有当衍生类可以替换掉基类&#xff0c;软件单位的功能不受到影响时&#xff0c;基类才能真正被覆用。而衍生类也能够在基类的基础上增加新的行为依赖倒转原则&#xff1a;开闭…

世界时钟 软件_Clocker for Mac(世界时钟软件)

Clocker for Mac是一款Mac平台上免费的世界时钟工具&#xff0c;方便我们查看世界各地的时间&#xff0c;它是开源免费的&#xff0c;完全没有广告。包括数百个时区&#xff0c;支持24小时制或AM / PM&#xff0c;macz提供Clocker mac免费版&#xff0c;欢迎前来下载&#xff0…

Mac 设置 NDK

2019独角兽企业重金招聘Python工程师标准>>> 1、首先查看我自己的android studio &#xff0c;找到以下路径 如上图&#xff0c;打开一个 AS 项目&#xff0c;file - project structure 这是我的3 个路径 Ndk /Users/dhbm/Library/Android/sdk/ndk-bundle Sdk /User…

Workbench has not been created yet

原因是&#xff1a;加载的插件变更后需要清理 在启动参数最后加入 -clean

四参数拟合曲线_每周放送|曲线拟合

曲线拟合No.1什么是曲线拟合所谓的曲线拟合&#xff0c;就是使用某一个模型(或者称为方程式)&#xff0c;将一系列的数据拟成平滑的曲线&#xff0c;以便观察两组数据之间的内在联系&#xff0c;了解数据之间的变化趋势。No.2曲线拟合的应用在数据分析时&#xff0c;我们有时需…

Spark集群运行jar包程序里的print日志哪里去了?

默认情况下&#xff0c;是输出到stdout里的。 方法一&#xff1a; 进入work所在机器的spark安装目录下的work目录&#xff0c;里面有日志输出。 方法二&#xff1a; 进入spark web ui 里 点击stdout就可以查看&#xff0c;如果没有可能在其他work上。

qt 批量裁剪图片_照片变素描,不用下载App,好用的在线图片处理及图库

我们要处理图片时&#xff0c;无论是在电脑还是手机上&#xff0c;往往都需要下载软件&#xff0c;但如果你只是临时用一下的话&#xff0c;下载软件难免显得工程有点浩大。下面就推荐几个图片处理网站&#xff0c;打开网页就能用。1、图片处理 funny。pho。to这个网站提供了很…

Intellij IDEA15:建立Scala的Maven项目

原文链接&#xff1a;http://blog.csdn.net/silentwolfyh/article/details/51172369 ------------------------------------------------------------------------------------ 在创建Scala的Maven之前要安装JavaJDK 、 Scala 的JDK 、 Maven配置&#xff0c;请参考下面 Int…

linux临时启动进程命令,Linux常用命令(一)服务控制及优化启动过程

Linux常用命令(一)服务控制及优化启动过程一、Red hat系统开机引导过程1、linux操作系统的引导过程一般包括以下几个阶段&#xff1a;开机自检、MBR引导、GRUB菜单、加载Linux内核、init进程初始化。2、Linux系统中的进程使用数字进行标记&#xff0c;每个进程的身份标记号称为…

linux 解决端口占用

2019独角兽企业重金招聘Python工程师标准>>> 1. netstat -apn|grep 9876 2.kill -9 端口号 --------- java 在linux后台运行的命令 ------------- nohup java -jar demo-shiro-0.0.1-SNAPSHOT.jar >temp.txt & 转载于:https://my.oschina.net/likaixuan0/…

IDEA中 @override报错的解决方法

原文路径&#xff1a;http://www.cnblogs.com/printN/p/6870036.html ------------------------------------ 今天用IDEA导入一个java工程时&#xff0c;碰上一个问题&#xff0c;代码中所有override处标红&#xff0c;并提示&#xff1a;override不支持对接口的实现。 网上百…

Linux目录的可写意味着,Linux权限分析 - osc_h5427nyq的个人空间 - OSCHINA - 中文开源技术交流社区...

在学习Linux的权限之前&#xff0c;我们先来理解几个概念:可读&#xff0c;可写 、可执行Linux的文件和目录有以下三种方式&#xff1a;r 、w 、x:可读&#xff0c;可写 、可执行r-可读(read)w-可写(write)x-可执行(execute)所有者 、所属组 、其他人Linux的文件和目录又可以有…

【深度学习篇】--Windows 64下tensorflow-gpu安装到应用

一、前述 一直以为自己的笔记本不支持tensflow-gpu的运行&#xff0c;结果每次运行模型都要好久。偶然间一个想法&#xff0c;想试试自己的笔记本&#xff0c;结果竟然神奇的发现能用GPU。于是分享一下安装步骤. 二、具体 因为版本之间有严格的对应关系&#xff0c;所以本文就将…

idea中Error:java: Compilation failed: internal java compiler error

Error:java: Compilation failed: internal java compiler error 原因是没有设置好 java compiler&#xff0c;检查下 File-----setting---compiler----java compoler