基于vue 兄弟组件之间事件触发(详解)
2019/6/30 21:33:06
本文主要是介绍基于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 兄弟组件之间事件触发(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持找一找教程网。
这篇关于基于vue 兄弟组件之间事件触发(详解)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-01-08Docker下的SqlServer发布订阅启用
- 2023-06-05Docker安装MS SQL Server并使用Navicat远程连接
- 2023-05-25深入浅出 SQL Server CDC 数据同步
- 2023-05-12通过空间占用和执行计划了解SQL Server的行存储索引
- 2023-04-24以SQLserver为例的Dapper详细讲解
- 2022-11-30SQL server高级函数查询
- 2022-11-26SQL SERVER数据库服务器CPU不能全部利用原因分析
- 2022-11-21SQL Server 时间算差值/常用函数
- 2022-11-20调试Archery连接SQL Server提示驱动错误
- 2022-10-22SQL Server 完整、差异备份+完整、差异还原(详细讲解,规避错误)