• Vue公交车-Bus,父子传值,子子传值,子父传值


    十年河东,十年河西,莫欺少年穷

    学无止境,精益求精

    Vue公交车-Bus,父子传值,子子传值,子父传值,功能非常强悍。

    1、引入公交车

    npm install vue-bus

    2、main.js 中全局注册公交车

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import Antd from 'ant-design-vue';/* 全局引入ant */
    import 'ant-design-vue/dist/antd.css'; /* 全局引入ant样式文件*/
    import VueBus from 'vue-bus';  /* 全局引入vue公交车 用于子子组件传值*/
    
    import components from './components/componentsRegist.js'  /* 全局引入组件注册JS*/
    
    import axios from './utils/request';
    
    Vue.config.productionTip = false
    Vue.use(Antd); /* 使用antd */
    
    Vue.prototype.$axios = axios /* axios */
    Vue.use(components);  /* 使用自定义组件 */
    Vue.use(VueBus); /* 公交车 */
    new Vue({ el: '#app', router, components: { App }, template: '<App/>' })

    新建 一个vue页面,点击按钮,执行公交车通知事件,如下

    <template>
      <div>
        <a-button type="danger" @click="buscilck"> 公交车 </a-button>
      </div>
    </template>
    <script>
    export default {
      created() {},
      data() {
        return {};
      },
      methods: {
        buscilck() {
          let that = this;
          let info={title:"请注意,我要超车了!"}
          that.$bus.emit("saveiotinfo",info);
        },
      },
    };
    </script>

    页面二接收公交车的通知事件,如下

    <template>
      <div>
      
      </div>
    </template>
    <script>
    export default {
      created() {
        let that = this;
        that.$bus.on("saveiotinfo", function (params) {
            console.log("我是公交车2,收到您的鸣笛:"+params.title)
        });
      },
      data() {
        return {
          businfo: {},
        };
      },
      methods: {
      },
    };
    </script>
    </script>

    页面三接收公交车事件,如下

    <template>
      <div>
      </div>
    </template>
    <script>
    export default {
      created() {
        let that = this;
        that.$bus.on("saveiotinfo", function (params) {
          console.log("我是公交车3,收到您的鸣笛:"+params.title)
        });
      },
      data() {
        return {
          businfo: {},
        };
      },
      methods: {
      },
    };
    </script>
    </script>

    执行结果【必须先点击页面二和页面三,用于初始化created钩子函数,否则,是收不到通知事件的】:

     @天才卧龙的博客

  • 相关阅读:
    设计模式系列
    设计模式系列
    设计模式系列- 抽象工厂模式
    设计模式系列
    Python3 系列之 编程规范篇
    【ABAP系列】SAP ABAP BDC_OKCODE 解释
    【ABAP系列】SAP ABAP MIR7预制凭证BAPI
    【ABAP系列】SAP ABAP 的替代和校验
    【ABAP系列】SAP ABAP 开发中的SMARTFORMS 参数
    【ABAP系列】SAP ABAP 实现FTP的文件上传与下载
  • 原文地址:https://www.cnblogs.com/chenwolong/p/vuebus.html
Copyright © 2020-2023  润新知