本文最后更新于2019年3月13日，已超过一年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！
组件通信有三种情况，父组件向子组件传值，子组件向父组件传值，这两种我们称为父子组件通信，还有一种就是非父子组件通信。
非父子组件通信
在简单的场景下，我们可以使用一个空的Vue实例作为中央事件总线，实例：
- <div id="root">
- <child-a contenta="1"></child-a>
- <child-b contentb="1"></child-b>
- </div>
- <script>
- Vue.prototype.bus = new Vue () //new一个vue实例作为中转
- Vue.component('child-a',{
- props: ['contenta'],
- data: function () {
- return {
- tempA: this.contenta
- }
- },
- template: '<div @click="handleClickB">{{tempA}}</div>',
- methods: {
- handleClickB: function () {
- this.bus.$emit('changeb') //触发changeb事件
- }
- },
- mounted: function () {
- var _this = this
- this.bus.$on('changea', function () {
- _this.tempA ++
- }) //监听changea事件并执行函数
- }
- })
- Vue.component('child-b',{
- props: ['contentb'],
- data: function () {
- return {
- tempB: this.contentb
- }
- },
- template: '<div @click="handleClickA">{{tempB}}</div>',
- methods: {
- handleClickA: function () {
- this.bus.$emit('changea') //触发changea事件
- }
- },
- mounted: function () {
- var _this = this //作用域发生变化，需要把this赋值给别名
- this.bus.$on('changeb', function () {
- _this.tempB ++
- }) //监听changeb事件并执行函数
- }
- })
- var vm = new Vue({
- el: '#root'
- })
- </script>
代码执行的流程是，点击组件A，触发handleClickB方法，handleClickB方法触发changeb事件，组件B通过公共实例bus监听changeb事件，发现changeb事件改变了，执行事件改变后的代码this.tempB++
效果
点击A组件B组件数字发生改变，点击B组件A组件的数字发生改变。
看了上面的代码我们可以看出，只用到了两个组件就有些麻烦了，所以我们在复杂的情况下要考虑使用专门的vuex技术
微信小程序
互联网开发，终身学习者，欢迎您的关注！
