• 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钩子函数,否则,是收不到通知事件的】:

     @天才卧龙的博客

  • 相关阅读:
    Spark Scala 读取GBK文件的方法
    Mac OS X 系统下自带的文本文件格式转换工具iconv
    报到
    java 字符串中含有双引号" "与单引号' '问题
    div1嵌套div2,div2居中的解决办法
    ionic4 创建 angular项目 ReactNative下载第三方库出错解决Error: EPERM: operation not permitted, rename
    ionic+cordova 创建项目+打包
    jxl读取excel文件异常:Unable to recognize OLE stream 的解决方法
    学习 javascript (一)javascript 简介
    学习 JavaScript (四)核心概念:操作符
  • 原文地址:https://www.cnblogs.com/chenwolong/p/vuebus.html
Copyright © 2020-2023  润新知