下面小编就为大家分享一篇基于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 兄弟组件之间事件触发(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持爱安网。

    无相关信息
最新资讯
iPhone 12被曝首次加入屏下指纹:为Apple Card营造一致体验

iPhone 12被曝首次加

据外媒报道,iPhone 12将首次引入屏幕指纹解锁。需要指
独家|淘宝App搜索改版:新增“1小时达”服务

独家|淘宝App搜索改版

用户购买后,商品在1小时内送上门。
“直播”买花,记者体验:只是看上去很美!

“直播”买花,记者体验

记者尝试给两家店铺打差评都没能成功。
隐身模式下浏览器也收集信息!谷歌被索赔超50亿美元

隐身模式下浏览器也收

美国科技巨头谷歌再遭巨额索赔。
美团暴涨逾8%市值一度超1200亿美元 王兴身家超雷军

美团暴涨逾8%市值一度

随着“618”销售火爆,电商类股票集体爆发。
使用量下降 特斯拉内华达州一超级充电站变停车场

使用量下降 特斯拉内

据国外媒体报道,由于受新冠疫情影响,电动汽车制造商特斯
最新文章
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建立连接时出现与网络相关的或特定于实