vue 组件间传值、通信的方法有：

  • 通过路由带参数进行传值
  • 通过设置 sessionStorage 缓存的形式进行传递
  • 父子组件之间的传值
  • 通过 eventBus 传值
  • vuex 进行传值

通过路由带参数进行传值

1.两个组件 A 和 B,A 组件通过 query 把 orderId 传递给 B 组件（触发事件可以是点击事件、钩子函数等）

1
this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }); // 跳转到B

2.在 B 组件中获取 A 组件传递过来的参数

1
this.$route.query.orderId;

通过设置 sessionStorage 缓存的形式进行传递

1.两个组件 A 和 B，在 A 组件中设置缓存 orderData

1
2
const orderData = { orderId: 123, price: 88 };
sessionStorage.setItem('缓存名称', JSON.stringify(orderData));

2.B 组件就可以获取在 A 中设置的缓存了

1
const orderData = sessionStorage.getItem('缓存名称');

父子组件之间的传值

父组件向子组件传值：props

1.定义父组件，引入子组件，在子组件标签中创建属性和值，如果需要动态传值，使用v-bind

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div class="parents">
    <Child num="66" v-bind:message="messageOfParents" />
  </div>
</template>
<script>
import Child from './Child'
export default {
  name: 'Parents',
  data () {
    return {
      messageOfParents: 'parents----message'
    }
  },
  components: {
    Child
  }
}
</script>
<style lang="less">
</style>

注意：传递的参数名称不识别驼峰命名，推荐使用横杠-命名

2.定义子组件，子组件通过 props 方法获取父组件传递过来的值。props 中可以定义能接收的数据类型，如果不符合会报错。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <div class="child">
    <p>{{num}}</p>
    <p>{{message}}</p>
  </div>
</template>
<script>
export default {
  name: 'Child',
  props: {
    num:Number,
    message: String
  }
}
</script>
<style>
</style>

子组件向父组件传值$emit 事件

1.在子组件中创建一个按钮，给按钮绑定一个点击事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
    <div class="app">
       <input @click="sendMsg" type="button" value="给父组件传递值">
    </div>
</template>
<script>
export default {

    data () {
        return {
            //将msg传递给父组件
            msg: "我是子组件的msg",
        }
    },
     methods:{
         sendMsg(){
             //func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
             this.$emit('func',this.msg)
         }
     }
}
</script>

2.在父组件中的子组件标签中监听该自定义事件并添加一个响应该事件的处理方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
    <div class="app">
        <child @func="getMsgFromSon"></child> // 通过自定义事件func触发getMsgFromSon
    </div>
</template>
<script>
import child from './child.vue'
export default {
    data () {
        return {
            msgFromSon: "this is msg"
        }
    },
    components:{
        child,
    },
    methods:{
            getMsgFromSon(data){ // 获取到子组件传来的数据
                this.msgFromSon = data;
                console.log(this.msgFromSon)
            }
    }
}
</script>

通过 eventBus 传值

不同组件之间传值，通过 eventBus（小项目少页面用 eventBus，大项目多页面使用 vuex）。这里的 eventBus 又称为事件总线，在 Vue 中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的 Vuex 作为状态管理中心，将通知的概念上升到共享状态层次。

1.定义一个新的 vue 实例专门用于传递数据，并导出

1
2
3
// 创建一个js文件，eventBus.js，位置随便放，我是放在了src目录下
import Vue from 'vue';
export default new Vue();

2.定义传递的方法名和传输内容，点击事件或钩子函数触发 eventBus.emit 事件

1
2
3
4
5
6
7
8
9
10
// 在A组件中，引入刚才的js
import '@/eventBus.js'

// 然后在methods里边定义方法
methods:{
    changesize(){
        eventBus.$emit('add',this.arg)
    }
}
// 最后在A组件触发

3.接收传递过来的数据

1
2
3
4
5
6
7
8
// 在B组件中也先引入eventBus.js，然后使用created生命周期函数
created(){
    eventBus.$on('add',(message)=>{
        //一些操作，message就是从A组件传过来的arg
        console.log(message)
        // console.log(this) 要注意这里的this指向eventBus中vue实例
    })
},

vuex 进行传值

为什么要用 vuex？

在 vue 中，父子组件传值可以很容易办到，但是兄弟组件间传值（兄弟组件下又有父子组件），或者大型 spa 单页面框架项目，页面多并且一层嵌套一层的传值，异常麻烦，用 vuex 来维护共有的状态或数据会显得得心应手。