下面小编就为大家分享一篇基于vue 兄弟组件之间事件触发(详解),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

直奔主题!

兄弟组件之间的事件触发,大概思路是通过父级组件交换数据,watch来监听触发事件。

是父级组件A同时引用两个子级组件B,C。点击B组件中的按钮执行C组件中的事件。

第一步:父级组件A

<bottom-play :play="playStatus" @playStatus="btmChild"></bottom-play> 
   
 methods:{ 
 listChild:function(val){//B组件自定义事件 状态是布尔值 
  this.playStatus = val; 
  }, 
 btmChild:function(val){//C组件自定义事件 
    this.btmStatus = val; 
  } 
} 

第二步:子级组件B代码

props: ['play'],//接受父级传递的数据 
watch:{//监听数据 如果改变执行audioPlay函数,audioPlay在methods中定义 
  play:'audioPlay' 
} 
audioPlay:function(){ 
 this.$emit('playStatus',false);//向父级组件传递参数 
} 

第三步:子级组件C代码

props: ['btmStatus'] 
,watch:{ 
  btmStatus:'playList' 
} 

总结就是A组件定义两个值分别传递给B,C。然后B,C组件watch方法监听数据触发事件。

以上这篇基于vue 兄弟组件之间事件触发(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持爱安网。

    无相关信息
最新资讯
豆瓣动态恢复正常 此前称“功能正在升级”

豆瓣动态恢复正常 此

豆瓣动态目前恢复正常,用户已经可以正常查看所关注用户
滴滴自动驾驶或将于年底落地上海

滴滴自动驾驶或将于年

目前,滴滴已经在上海取得自动驾驶路测牌照,前期预计将投
FB被指滥用面部识别数据 或将面临350亿美元集体诉讼

FB被指滥用面部识别数

据外媒报道,在伊利诺伊州的一场涉及滥用面部识别数据的
结构性存款大变局:支付宝微信京东App代销或终结?

结构性存款大变局:支

根据央行发布数据测算,结构性存款规模在今年2月达到峰
周鸿祎与齐向东分家后再“同框”:“合影纪念下”

周鸿祎与齐向东分家后

第六届世界互联网大会今日开幕。在开幕式环节,360董事
软银寻求通过新投资规避WeWork的债务

软银寻求通过新投资规

据路透社引述知情人士透露,软银集团正试图拿到WeWork的
最新文章
SQL Server 2008数据库分布式查询知识

SQL Server 2008数据

今天小编就为大家分享一篇关于SQL Server 2008数据库
SQL Server 2008数据库设置定期自动备份的方法

SQL Server 2008数据

这篇文章主要给大家介绍了关于SQL Server 2008数据库
sqlserver2008首次登录失败问题及解决方法

sqlserver2008首次登

这篇文章主要介绍了sqlserver2008首次登录失败问题及
解决SQL Server 2008 不能使用 “.” local本地连接数据库问题

解决SQL Server 2008

这篇文章主要介绍了解决SQL Server 2008 不能使用 “.
SQL SERVER 2008 r2 数据压缩的两种方法

SQL SERVER 2008 r2

这篇文章主要介绍了SQL SERVER 2008 r2 数据压缩的两
SQL Server 2008打开输入sa密码提示无法登陆数据库的解决方法

SQL Server 2008打开

与 SQL Server建立连接时出现与网络相关的或特定于实