vue非父子组件通信

最新推荐文章于 2022-12-19 20:47:23 发布

机智的赵先生

最新推荐文章于 2022-12-19 20:47:23 发布

阅读量392

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue 非父子组件通信

本文链接：https://blog.csdn.net/badmoonc/article/details/80633677

vue 专栏收录该内容

12 篇文章

订阅专栏

关于非父子组件通信的解决办法，vue的官网也有明确的说明，即：通过$emit和$on的方式进行通信。

而我刚学习时，查了很多网上写的例子，对我这样的初学者还是不太友好，就像下面这种：

简单一看，咦～这么简单（其实用法确实如此）。好，直接复制粘贴到自己的项目中去，然后才发现，我去～怎么不能用！。大家是不是像我一样是这么写的：

组件A

<script>
import Vue from 'vue'
export default{
    mounted(){
        var bus = new Vue();
        bus.$emit('change',1);
        //或者干脆这样
        //this.$emit('change',1);
    }
}

</script>

组件B

<script>
import Vue from 'vue'
export default{
    mounted(){
        var bus = new Vue();
        bus.$on('change',1);
        //或者这样
        //this.$on('change',function(val){})
    }
}

</script>

我相信肯定有这样的同学，今天也主要是为这些同学解决问题的，当然，不会用$emit的同学也可以继续往下看。

我们要知道，在我们当前的开发中，每个组件都是一个单独的模块，我们直接用var声明肯定是不行的，那么我们该怎么做呢，其实也简单，我们可以新建一个js文件，就建在components文件夹下，跟当前我们的组件在同一个目录下，我们叫它bus.js，就像下边这张图所示：