zoukankan      html  css  js  c++  java
  • vue兄弟组件通信、兄弟组件传值(本人是用的是中央控件作为媒介),并一同解决重负传值、第一未传值

    1、中央控件
    
    在根目录创建  Bus.js ,在里面只需写两行代码如下
    
    import Vue from 'vue'
    export default new Vue
     
    2、第一个组件 引入 Bus.js  其中'sendByBus'作用是作为身份标识使用的
    import bus from '@/Bus'
    //第一未传值 :主要还是页面未创建的时候,按钮已经发出了消息,页面当然接收不到了,直接看代码~我就不赘述了。。。(可以了解下js的事件机制宏任务,微任务)
    nextStep() {
          // 通过中央控件兄弟传值
          setTimeout(() => {  // 解决第一未传值 
            bus.$emit('sendByBus', this.form) //每次都让值改变,保证每次点击都会被接收
          }, 200)
          
          this.$emit('nextStep')
     },
     
    3、第二个组件 引入 Bus.js
    import bus from '@/Bus'
     
      mounted() {
        bus.$on('sendByBus', val => {
          console.log(val)
        })
      },
     
      beforeDestroy() {
         bus.$off();//销毁每次的传值  解决重负传值
      }
     
    如有帮助请关注。谢谢
  • 相关阅读:
    认证功能装饰器
    装饰器升级版
    装饰器
    闭包函数
    名称空间与作用域
    嵌套函数
    函数对象
    命名关键字参数
    函数单数的使用
    函数的定义与调用
  • 原文地址:https://www.cnblogs.com/huoshengmiao/p/14775771.html
Copyright © 2011-2022 走看看