埋坑一: 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 的一个实现…

oracle中where中使用函数,Oracle 尽量避免在 SQL语句的WHERE子句中使用函数

-- Start在 WHERE 子句中应该尽量避免在列上使用函数&#xff0c;因为这样做会使该列上的索引失效&#xff0c;影响SQL 语句的性能。即使该列上没有索引&#xff0c;也应该避免在列上使用函数。考虑下面的情况&#xff1a;CREATE TABLE EMPLOYEE(NAME VARCHAR2(20) NOT NULL,--…

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

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

第三章(续)

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

Linux Mysql 安装方法

1、检查是否有安装 [rootJDDB mysql]# yum list installed | grep mysql mysql-community-client.x86_64 5.6.39-2.el7 mysql56-community mysql-community-common.x86_64 5.6.39-2.el7 mysql56-community mysql-community…

oracle 经纬度算距离,根据经纬度诀别用java和Oracle存储过程计算两点距离

根据经纬度分别用java和Oracle存储过程计算两点距离create or replace procedure SP_GET_DISTANCE(cx in number,cy in number,sx in number, sy in number,distance out varchar2)isd number;x number;y number;r number;pi number;begin--开始计算r:6371229;--地球半径pi:3.1…

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;开闭…

python的底层实现_Python底层封装实现方法详解

这篇文章主要介绍了Python底层封装实现方法详解,文中通过示例代码介绍的非常详细&#xff0c;对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下事实上&#xff0c;python封装特性的实现纯属“投机取巧”&#xff0c;之所以类对象无法直接调用私有方法和属性&a…

php 附近的距离,PHP查询附近的人及其距离的实现方法_PHP

本文实例讲述了PHP查询附近的人及其距离的实现方法。分享给大家供大家参考&#xff0c;具体如下&#xff1a;array(lat>$lat $dlat,lng>$lng-$dlng),right-top>array(lat>$lat $dlat, lng>$lng $dlng),left-bottom>array(lat>$lat - $dlat, lng>$ln…

统计指定目录下的视频时长

package time;import java.io.File;import org.apache.log4j.Logger;import it.sauronsoftware.jave.Encoder; import it.sauronsoftware.jave.EncoderException; import it.sauronsoftware.jave.MultimediaInfo;public class Test2 {/* 支持的后缀 */private static final Str…

怎么在cmd中运行python脚本_cmd中运行python脚本智能使用流程

(此时的ScaleMode自动变Vbuser)更有趣的是用来计算字串高、宽的TextHeight/TextWidth也变成以座标0-100的方式来表现了On Error Resume NextSet outstreemWscript.stdoutIf (LCase(Right(Wscript.fullname,11))"Wscript.exe") ThenSet objShellWscript.CreateObject(…

世界时钟 软件_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

oracle必须声明标识符函数,引用变量时需要必须声明标识符

SQL> declare2 pname emp.ename%type;3 psal emp.sal%type;4 begin5 select enmae,sal into pname,psal from emp where empno7782;6 dbms_output.put_line(pname||xsis||psal);7 end;8 /pname emp.ename%type;*第 2 行出现错误:ORA-06550: 第 2 行, 第 7 列:PLS-002…

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

曲线拟合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上。