• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    基于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中的$emit 与$on父子组件与兄弟组件的之间通信方式
    • vue2.0 兄弟组件(平级)通讯的实现代码
    • Vue 兄弟组件通信的方法(不使用Vuex)
    • vue2.0s中eventBus实现兄弟组件通信的示例代码
    • Vue.js中兄弟组件之间互相传值实例
    • Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
    • vue中子组件调用兄弟组件方法
    上一篇:如何安装SQL Server 2012群集
    下一篇:SQL SERVER 2008 r2 数据压缩的两种方法第1/2页
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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