使用vuex对兄弟组件传值_vue 不使用 vuex 进行组件间传值

简单的传值不必非要使用 vuex

子组件向父组件传值

假设 子组件 A 向父组件 B 发送数据。

|-compontens

| |– A.vue

| |– B.vue

子组件 A.vue 内容容下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

传递消息给父组件

export default {

data(){

return{

}

},

methods:{

sentMessage:function(){

this.$emit('NewsToFather','hi，父组件')

}

}

}

使用 this.$emit() 发送一个 key 为’NewsToFather’,value 为’hi，父组件’ 的数据。

子组件 A 发送后消息后，需要父组件去获取这个数据

父组件 B.vue 内容如下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

import child from './a.vue'

export default {

data(){

return{

parentMessage: 'I am a father',

}

},

methods:{

showMsgFromChild:funcation(data){

console.log(data) // hi，父组件

}

},

components:{

Child

}

}

兄弟组件间传值

因为兄弟组件之间实际上是无法互通的，所以我们需要一个能在这两个组件之间‘中转’的角色。

假设：组件 A 和组件 B 是兄弟节点，文档结构如：

|-compontens

| |– A.vue

| |– B.vue

这时候，我们需要一个中转文档，不妨起名为 bus.js,我把这个文档放在 assets 文档夹下

bus.js 的内容如下：

1

2import Vue from 'Vue'

export default new Vue()

|-assets

| |– bus.js

|-compontens

| |– A.vue

| |– B.vue

用于中转的东西有了后，我们需要让 A B组件都能和 bus 产生交流

所以在 A.vue 和 B.vue 中的中都加入下列代码

1

2

3

4

5

6

import bus from '../assets/bus.js'

export default {

//......

}

现在 A B 这个兄弟组件之间就能产生交流了，现在我们让 A 组件向 发送数据(实质上是让A组件中的 bus 发送数据)。

假设 A.vue 是如下内容

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

传递消息给 B

import bus from '../../assets/bus.js'

export default {

data(){

return{

message:'你好啊，B'

}

},

methods:{

sentMessage:function(){

let data =this.message

bus.$emit('NewsToB',data)

}

}

}

A 组件中的 sentMessage 方法调用bus.$emit('NewsToB',data) 语句，这会让咱们的 bus 发送一个 key为'NewsToB' ，value为data 的数据。

A组件发送了内容，B组件怎么接收内容呢？

假设 B.vue 是这样的：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

import bus from '../../assets/bus.js'

export default {

data(){

return{

grapevines: [],

}

},

created(){

bus.$on('NewsToB',(data)=>{

console.log(data) //'你好啊，B'

}

})

}

}

组件 B 让 bus 用$on 来监听，在这里我们监听的'NewsToB'正好是 A 组件让bus传递的数据，这样一来我们就在 B 组件中获取到了 A 组件的数据

1

2

3

4bus.$on('NewsToB',(data)=>{

console.log(data) //'你好啊，B'

}

})

简单总结一下，三个步骤找一个中间角色 bus，让 AB 组件都和中间角色产生联系(important bus from ‘../../assets/bus.js’)

A 组件中的 bus 发送一个信息(bus.$emit(‘NewsToB’,data))

B 组件中的 bus 接受一个信息 bus.$on(‘NewsToB’,(data)=>{})