Vue 非父子组件通信  

vue

 

  组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求。组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信。前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有下面的几句

具体如何去实现却没有很详细的说明,于是自己试着进行了实现。先看下简单的通信效果:

就是点击了一个组件,另一个组件的数字递加。

html如下:

<div >

<component-a></component-a>

<component-b></component-b>

</div>

再来看一下如何实现每一个组件:

  var bus = new Vue() //首先建立一个空的Vue实例作为事件的中转

Vue.component('component-a',{

template: `<div><button @click="incrementB">{{masgA}}</button></div>`, //添加点击事件incrementB ,因为点击A需要增加B

data () {

return {

masgA : 0

}

},

methods: {

incrementB: function () { //增加B的事件

bus.$emit('incrementB') //中转站bus 触发incrementB事件

}

},

mounted: function () {

var _this = this

bus.$on('incrementA',function(){ //中转站bus自定义increamentA事件用来增加msgA,这个事件最终由组件B进行触发

_this.masgA ++

})
       //bus.$on('incrementA',()=>{ //这里也可以用箭头函数,就不会有_this这个变量了,因为箭头函数不会改变this指向
       // this.masgA ++
       //})

}

})

从上面的代码可以看出真正的改变方法是通过bus里注册监听事件来实现的,同理代component-b也是一样

  Vue.component('component-b',{

template: `<div><button @click="incrementA">{{masgB}}</button></div>`,

data () {

return {

masgB : 0

}

},

methods: {

incrementA: function () {

bus.$emit('incrementA')

}

},

mounted: function(){

bus.$on('incrementB',() => {

this.masgB ++

})

}

})

完整代码如下,可直接复制运行

 1 <!DOCTYPE html>

2 <html lang="en">

3 <head>

4 <meta charset="UTF-8">

5 <title>非父子组件通信</title>

6 </head>

7 <body>

8 <div >

9 <component-a></component-a>

10 <component-b></component-b>

11 </div>

12 <script src="https://unpkg.com/vue/dist/vue.js"></script>

13 </body>

14 <script>

15 var bus = new Vue() //首先建立一个空的Vue实例作为事件的中转

16

17 Vue.component('component-a',{

18 template: `<div><button @click="incrementB">{{masgA}}</button></div>`, //添加点击事件

19 data () {

20 return {

21 masgA : 0

22 }

23 },

24 methods: {

25 incrementB: function () {

26 bus.$emit('incrementB')

27 }

28 },

29 mounted: function () {

30 var _this = this

31 bus.$on('incrementA',function(){

32 _this.masgA ++

33 })

34 bus.$on('incrementA',()=>{

35 this.masgA ++

36 })

37 }

38 })

39

40 Vue.component('component-b',{

41 template: `<div><button @click="incrementA">{{masgB}}</button></div>`,

42 data () {

43 return {

44 masgB : 0

45 }

46 },

47 methods: {

48 incrementA: function () {

49 bus.$emit('incrementA')

50 }

51 },

52 mounted: function(){

53 bus.$on('incrementB',() => {

54 this.masgB ++

55 })

56 }

57 })

58

59 var vm = new Vue({

60 el: "#app"

61 })

62 </script>

  同时也可以看出这么做仅有两个组件就有些麻烦,事件的流向不是很清晰,所以在出现复杂的场景时需要使用VueX进行管理。

  本文结束,有任何不同的意见欢迎在留言区讨论。

  组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求。组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信。前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有下面的几句

具体如何去实现却没有很详细的说明,于是自己试着进行了实现。先看下简单的通信效果:

就是点击了一个组件,另一个组件的数字递加。

html如下:

<div >

<component-a></component-a>

<component-b></component-b>

</div>

再来看一下如何实现每一个组件:

  var bus = new Vue() //首先建立一个空的Vue实例作为事件的中转

Vue.component('component-a',{

template: `<div><button @click="incrementB">{{masgA}}</button></div>`, //添加点击事件incrementB ,因为点击A需要增加B

data () {

return {

masgA : 0

}

},

methods: {

incrementB: function () { //增加B的事件

bus.$emit('incrementB') //中转站bus 触发incrementB事件

}

},

mounted: function () {

var _this = this

bus.$on('incrementA',function(){ //中转站bus自定义increamentA事件用来增加msgA,这个事件最终由组件B进行触发

_this.masgA ++

})
       //bus.$on('incrementA',()=>{ //这里也可以用箭头函数,就不会有_this这个变量了,因为箭头函数不会改变this指向
       // this.masgA ++
       //})

}

})

从上面的代码可以看出真正的改变方法是通过bus里注册监听事件来实现的,同理代component-b也是一样

  Vue.component('component-b',{

template: `<div><button @click="incrementA">{{masgB}}</button></div>`,

data () {

return {

masgB : 0

}

},

methods: {

incrementA: function () {

bus.$emit('incrementA')

}

},

mounted: function(){

bus.$on('incrementB',() => {

this.masgB ++

})

}

})

完整代码如下,可直接复制运行

 1 <!DOCTYPE html>

2 <html lang="en">

3 <head>

4 <meta charset="UTF-8">

5 <title>非父子组件通信</title>

6 </head>

7 <body>

8 <div >

9 <component-a></component-a>

10 <component-b></component-b>

11 </div>

12 <script src="https://unpkg.com/vue/dist/vue.js"></script>

13 </body>

14 <script>

15 var bus = new Vue() //首先建立一个空的Vue实例作为事件的中转

16

17 Vue.component('component-a',{

18 template: `<div><button @click="incrementB">{{masgA}}</button></div>`, //添加点击事件

19 data () {

20 return {

21 masgA : 0

22 }

23 },

24 methods: {

25 incrementB: function () {

26 bus.$emit('incrementB')

27 }

28 },

29 mounted: function () {

30 var _this = this

31 bus.$on('incrementA',function(){

32 _this.masgA ++

33 })

34 bus.$on('incrementA',()=>{

35 this.masgA ++

36 })

37 }

38 })

39

40 Vue.component('component-b',{

41 template: `<div><button @click="incrementA">{{masgB}}</button></div>`,

42 data () {

43 return {

44 masgB : 0

45 }

46 },

47 methods: {

48 incrementA: function () {

49 bus.$emit('incrementA')

50 }

51 },

52 mounted: function(){

53 bus.$on('incrementB',() => {

54 this.masgB ++

55 })

56 }

57 })

58

59 var vm = new Vue({

60 el: "#app"

61 })

62 </script>

  同时也可以看出这么做仅有两个组件就有些麻烦,事件的流向不是很清晰,所以在出现复杂的场景时需要使用VueX进行管理。

  本文结束,有任何不同的意见欢迎在留言区讨论。

以上是 Vue 非父子组件通信   的全部内容, 来源链接: utcz.com/z/380262.html

回到顶部