Vue公交車-Bus，父子傳值，子子傳值，子父傳值

十年河東，十年河西，莫欺少年窮

學無止境，精益求精

傳統方式：

1.父組件可以使用 props 把數據傳給子組件。

1.子組件可以使用 $emit 觸發父組件的自定義事件。

公交車方式：

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鈎子函數，否則，是收不到通知事件的】：

 

 @天才卧龍的博客