下面小编就为大家分享一篇基于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' 
} 

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

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

    无相关信息
最新资讯
中国移动启动5G SA核心网设备集采 总预算超25.4亿

中国移动启动5G SA核

中国移动启动2020年5G SA核心网移动用户数据设备集采,
张小龙“故意”缺席公开课:微信要用产品说话

张小龙“故意”缺席公

“其实我是故意不来现场的……用产品说话,才是我们应该
微信数据报告:公众号打开活跃高峰在晚上约21点

微信数据报告:公众号打

微信今日公布了《2019微信数据报告》,报告显示,截止到20
美国5G初体验:致癌?和4G差不多?远不如中国!

美国5G初体验:致癌?和4G

谜之美国5G信号速度。
“永远在线”是未来5G发展趋势—访联想董事长杨元庆

“永远在线”是未来5G

中国联想集团董事长兼首席执行官杨元庆8日在展会上接
韵达回应快递员暴打消费者事件:涉事快递员已开除

韵达回应快递员暴打消

深圳罗湖吴女士因投诉快递员遭登门暴打事件受到大众关
最新文章
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建立连接时出现与网络相关的或特定于实