1、bus匯流排

//定義bus外掛

//在util資料夾下定義bus.js

import Vue from 'vue';

let install = (vue) => {
    vue.prototype.bus = new Vue();
}
export default install;

1.1、用到bus匯流排的地方，兄弟元件傳值(父子元件也可以使用bus匯流排，但他使用自身的this.$emit\this.$on,更方便，相當於bus匯流排的變種)

//在main.js中引入bus，方便在全域性使用:

1.2、接下來就可以在元件A和元件B中使用

//元件A接受元件B傳遞來的資料
  created() {
    this.bus.$on("hello", (data) => {
        console.log(data);
      });
  },

//元件B傳遞

<template>
    <button @click="handle">傳遞引數</button>
</template>
<script>
export default{
    methods:{
        handle(){
            this.bus.$emit("hello", { obj: 123 });
        }
    }
}
</script>        

2、路由傳參:

1、命名路由傳參
this.$router.push({ name: 'user', params: { user: 'nickname' }});
//頁面接受
this.$route.params
2、查詢引數傳參
this.$router.push({path: '/user', query: {user: "nickname"}});
//頁面接受
this.$route.query

3、父子元件傳參

//子元件
this.$emit("update",123);
//父元件觸發
<children @update="update" />     //children代表子元件
export default{
    methods:{
       update(data){
            console.log(data);
        }
    }
}
    

4、vuex全域性使用引數

//新建store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})
//main.js中引入，就可以全域性使用state
import store from './store'
new Vue({
  store,
  render: h => h(App)
}).$mount('#app');