我是靠谱客的博主 糟糕小土豆,最近开发中收集的这篇文章主要介绍基于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 兄弟组件之间事件触发(详解)的全部内容,希望文章能够帮你解决基于vue 兄弟组件之间事件触发(详解)所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(136)

评论列表共有 0 条评论

立即
投稿
返回
顶部