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

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

热门标签:AI电销 Linux服务器 百度竞价排名 网站排名优化 呼叫中心市场需求 铁路电话系统 地方门户网站 服务外包

直奔主题!

兄弟组件之间的事件触发,大概思路是通过父级组件交换数据,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 兄弟组件之间事件触发(详解)》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266