本文共 2289 字，大约阅读时间需要 7 分钟。

1.父传子 prop

在父组件的子组件标签上绑定一个属性，挂载要传输的变量

在子组件中通过props来接收数据，props可以是一个数组也可以是一个对象，接收过来的数据可以直接使用

2.子传父 $emit( )

在父组件组件的标签上自定义一个事件，调用相应的方法

在子组件的方法中通过this.$emit(‘事件名’)来触发在父组件中定义的事件，数据是以参数的形式进行传递的

3. 兄弟组件传值 EventBus

在main.js中，创建一个vue实例，并挂载到vue原型上

import Vue from 'vue'import App from './App.vue'const Bus = new Vue()Vue.prototype.Bus = BusVue.config.productionTip = falsenew Vue({     render: h => h(App),}).$mount('#app')

在传输数据的组件中，通过Bus.$emit(‘事件名’，‘参数’)来派发事件

在接收数据的组件中，通过Bus.$on(‘事件名’，(val)=>{})来接受数据

4. vuex

vuex是一个专门为vue.js打造的状态管理模式，它相当于一个公共仓库，所有组件都使用里面的属性和方法

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({     state: {       msg: 'vuex组件通信'  },  mutations: {   },  actions: {   },  getters: {   },  modules: {   }})

父组件

子组件

4. 本地存储

原理同vuex相似，利用 window.sessionStorage.setItem(“变量名”, 变量) 存储变量到本地存储，然后通过window.sessionStorage.getItem(“变量名”, 变量) 获取变量

5. Vue全局变量

原理是将属性值挂载到vue的原型上，然后通过 this.属性值 来访问变量

main.js

import Vue from 'vue'import App from './App.vue'import store from './store/index'Vue.config.productionTip = falseVue.prototype.msg = "Vue全局变量"new Vue({     store,  render: h => h(App),}).$mount('#app')

父组件

子组件

6. 路由传参

主要利用路由之间的跳转来传值

const routes = [  {       path: '/',    name: 'Home',    component: Home  },  {       path: '/about',    name: 'About',    component: () => import('../views/About.vue')  }]

传递变量的组件

接收变量的组件