主页 > 知识库 > 基于vue 兄弟组件之间事件触发(详解)

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

热门标签:南京外呼系统租用 高德地图标注生成 济南电销外呼防封卡怎么样 电销外呼系统违规 400电话办理2273649Z空间 智能语音外呼系统打电话 怎样在地图标注自己的信息 400电话怎么申请收费标准 宁夏外呼系统方案

直奔主题!

兄弟组件之间的事件触发,大概思路是通过父级组件交换数据,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中的$emit 与$on父子组件与兄弟组件的之间通信方式
  • vue2.0 兄弟组件(平级)通讯的实现代码
  • Vue 兄弟组件通信的方法(不使用Vuex)
  • vue2.0s中eventBus实现兄弟组件通信的示例代码
  • Vue.js中兄弟组件之间互相传值实例
  • Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
  • vue中子组件调用兄弟组件方法

标签:潜江 惠州 茂名 贵港 唐山 平顶山 长白山 仙桃

巨人网络通讯声明:本文标题《基于vue 兄弟组件之间事件触发(详解)》,本文关键词  基于,vue,兄弟,组件,之间,;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 下面列出与本文章《基于vue 兄弟组件之间事件触发(详解)》相关的同类信息!
  • 本页收集关于基于vue 兄弟组件之间事件触发(详解)的相关信息资讯供网民参考!
  • 推荐文章