未加星标

基于vue 兄弟组件之间事件触发(详解)

字体大小 | |
[数据库(mssql) 所属分类 数据库(mssql) | 发布者 店小二03 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

直奔主题!

兄弟组件之间的事件触发,大概思路是通过父级组件交换数据,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.js中兄弟组件之间互相传值实例Vue 兄弟组件通信的方法(不使用Vuex)Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信详解Vue组件之间的数据通信实例Vue.js每天必学之组件与组件间的通信

本文数据库(mssql)相关术语:熊片数据库 mssql数据库 oracle数据库 pubmed数据库 access数据库 万方数据库

主题: 数据数据通信
tags: 组件,父级,play,val,watch,audioPlay,playStatus,Vue,事件,触发,子级,function,btmStatus,兄弟
分页:12
转载请注明
本文标题:基于vue 兄弟组件之间事件触发(详解)
本站链接:http://www.codesec.net/view/573715.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 数据库(mssql) | 评论(0) | 阅读(339)