经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue?组件通信的多种方式
来源：jb51　　时间：2022/3/2 17:44:47　　对本文有异议

前言

在vue中，? 组件的关系不外乎以下三种：

在这里插入图片描述

组件是需要通信的，在开发中，常用到的通信方式有：vuex、eventBus、以及props与emit、$parent与$children，除此之外，还有provide与inject、$attrs与$listeners等。

一、vuex

这个相信大家用的很多了，简单回顾一下：

  • State：放状态的地方
  • Mutation：唯一修改状态的地方，不支持异步
  • Action：通过调用Mutation中的方法来达到修改状态的目的，支持异步
  • Getter：可以理解为计算属性
  • Module：模块，每个模块拥有自己的 state、mutation、action、getter

简单的使用这里不赘述，提一下module里面的命名空间。

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名

在这里插入图片描述

这样，在使用的时候我们就可以这样用了：

在这里插入图片描述

二、eventBus

这个称为‘事件总线’，简单看下是怎么使用的：

  • 初始化

首先是初始化一个eventBus，可以绑定到vue原型上，也可以绑定到window对象上，还可以抽出来当做一个模块，在需要的时候再引入。这里直接绑定到vue原型上：

在这里插入图片描述

  • 创建事件和删除事件

在需要的组件上创建和删除事件：

在这里插入图片描述

  • 触发事件

最后就是在需要的地方触发事件了

在这里插入图片描述

三、props/emit

这个不用多说了，父子通信用的最多的应该就是这个了。当然，如果以子组件为跳板，也可以做到祖孙之间通信，不过比较麻烦。不建议这样操作。

四、$parent/$children

$parent直接访问的就是父实例，而$children则返回的是实例数组。所以我一般都是$parent搭配$refs使用。

五、$attrs/$listeners

这两个可能会用的比较少，来看下官网的介绍：

在这里插入图片描述

怎么理解呢，简单来讲就是，$attrs接收除了prop、style、class之外的所有绑定属性，$listeners则接收除了被.native修饰的所有绑定事件。具体来看下例子：

  1. <template>
  2.   <div>
  3.     <p>父组件</p>
  4.     <input type="text" v-model="formData.inputValue" />
  5.     <p>子组件</p>
  6.     <Son
  7.       :inputValue="formData.inputValue"
  8.       :otherValue="otherValue"
  9.       @success="success"
  10.       @input.native="handleInput"
  11.       v-bind="$attrs"
  12.       v-on="$listeners"
  13.     ></Son>
  14.   </div>
  15. </template>
  16. <script>
  17. import Son from "./son.vue";
  18. export default {
  19.   components: { Son },
  20.   provide() {
  21.     return {
  22.       father: this.formData,
  23.     };
  24.   },
  25.   data() {
  26.     return {
  27.       formData: {
  28.         inputValue: "123",
  29.       },
  30.       otherValue: 999,
  31.     };
  32.   },
  33.   methods: {
  34.     success(data) {
  35.       console.log(data);
  36.     },
  37.     handleInput() {},
  38.   },
  39. };
  40. </script>
  41.  
  1. <template>
  2.   <div>
  3.     <input type="text" v-model="inputValue" @change="handleChange" />
  4.   </div>
  5. </template>
  6. <script>
  7. export default {
  8.   props: {
  9.     inputValue: String,
  10.   },
  11.   created() {
  12.     console.log(this.$attrs, "son---$attrs");
  13.     console.log(this.$listeners, "son---$listeners");
  14.   },
  15.   methods: {
  16.     handleChange() {
  17.       this.father.inputValue = this.inputValue;
  18.     },
  19.   },
  20. };
  21. </script>

按照之前的理解，$attrs应该只能接收到otherValue，$listeners则只能接收到success事件，看下打印结果：

在这里插入图片描述

结果确实也是这样的。除此之外，还可传递给孙组件：

  1. <template>
  2.   <div>
  3.     <input type="text" v-model="inputValue" @change="handleChange" />
  4.     <GrandSon v-bind="$attrs" v-on="$listeners"></GrandSon>
  5.   </div>
  6. </template>
  7. <script>
  8. import GrandSon from "./grandSon.vue";
  9. export default {
  10.   components: { GrandSon },
  11.   props: {
  12.     inputValue: String,
  13.   },
  14.   created() {
  15.     console.log(this.$attrs, "son---$attrs");
  16.     console.log(this.$listeners, "son---$listeners");
  17.   },
  18.   methods: {
  19.     handleChange() {
  20.       this.father.inputValue = this.inputValue;
  21.     },
  22.   },
  23. };
  24. </script>
  25.  
  1. <template>
  2.   <div>
  3.     <input type="text" v-model="inputValue" @change="handleChange" />
  4.   </div>
  5. </template>
  6. <script>
  7. export default {
  8.   props: {
  9.     inputValue: String,
  10.   },
  11.   created() {
  12.     console.log(this.$attrs, "grandSon---$attrs");
  13.     console.log(this.$listeners, "grandSon---$listeners");
  14.   },
  15.   methods: {
  16.     handleChange() {
  17.       this.father.inputValue = this.inputValue;
  18.     },
  19.   },
  20. };
  21. </script>

在这里插入图片描述

通过这种方式，祖孙之间也实现了通信。

六、provide/inject

provide/inject可以在一个祖先组件中向它的所有后辈组件注入一个依赖，只要上下游关系成立就能生效。简单的理解就是provide是注入数据，inject是获取数据。所以provide是用于父组件，inject是用于子孙组件。provide应该是一个对象或者返回一个对象的函数，inject应该是一个字符串数组或者一个对象。官网提到这么一句话：

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。

这句话怎么理解呢？字面理解就是你要想在上下游传递的那个数据是可响应的，那么就应该以对象的形式传递，先试一下以基本数据类型的形式传递，看下例子：
父组件：

  1. <template>
  2.   <div>
  3.     <p>父组件</p>
  4.     <input type="text" v-model="inputValue" />
  5.     <p>子组件</p>
  6.     <Son></Son>
  7.     <p>孙组件</p>
  8.     <GrandSon></GrandSon>
  9.   </div>
  10. </template>
  11. <script>
  12. import Son from "./son.vue";
  13. import GrandSon from "./grandSon.vue";
  14. export default {
  15.   components: { Son, GrandSon },
  16.   provide() {
  17.     return {
  18.       father: this.inputValue,
  19.     };
  20.   },
  21.   data() {
  22.     return {
  23.       inputValue: "123",
  24.     };
  25.   },
  26. };
  27. </script>

子组件：

  1. <template>
  2.   <div>
  3.     <input type="text" v-model="inputValue" @change="handleChange" />
  4.   </div>
  5. </template>
  6. <script>
  7. export default {
  8.   inject: ["father"],
  9.   data() {
  10.     return {
  11.       inputValue: "",
  12.     };
  13.   },
  14.   watch: {
  15.     father(val) {
  16.       console.log(val, "val");
  17.       this.inputValue = val;
  18.     },
  19.   },
  20.   created() {
  21.     console.log(this, "this");
  22.   },
  23.   methods: {
  24.     handleChange() {
  25.       this.father.inputValue = this.inputValue;
  26.     },
  27.   },
  28. };
  29. </script>

在子组件打印this：

在这里插入图片描述

可以看到，父组件的inputValue值是被注入到子组件当中的。但却监听不到这个father。

请添加图片描述

然后，我们改成以对象的形式进行注入：

  1. <template>
  2.   <div>
  3.     <p>父组件</p>
  4.     <input type="text" v-model="formData.inputValue" />
  5.     <p>子组件</p>
  6.     <Son></Son>
  7.     <p>孙组件</p>
  8.     <GrandSon></GrandSon>
  9.   </div>
  10. </template>
  11. <script>
  12. import Son from "./son.vue";
  13. import GrandSon from "./grandSon.vue";
  14. export default {
  15.   components: { Son, GrandSon },
  16.   provide() {
  17.     return {
  18.       father: this.formData,
  19.     };
  20.   },
  21.   data() {
  22.     return {
  23.       formData: {
  24.         inputValue: "123",
  25.       },
  26.     };
  27.   },
  28. };
  29. </script>
  1. <template>
  2.   <div>
  3.     <input type="text" v-model="inputValue" @change="handleChange" />
  4.   </div>
  5. </template>
  6. <script>
  7. export default {
  8.   inject: ["father"],
  9.   data() {
  10.     return {
  11.       inputValue: "",
  12.     };
  13.   },
  14.   watch: {
  15.     'father.inputValue'(val){
  16.       console.log(val, "val");
  17.       this.inputValue = val;
  18.     },
  19.   },
  20.   created() {
  21.     console.log(this, "this");
  22.   },
  23.   methods: {
  24.     handleChange() {
  25.       this.father.inputValue = this.inputValue;
  26.     },
  27.   },
  28. };
  29. </script>

这个时候我们看下打印的this以及效果：

在这里插入图片描述

请添加图片描述

这样就可以实现数据的响应了。这里有一个点需要注意，如果在父组件中将整个父组件的this注入到后代组件中，在后代组件中是不能通过深度监听来监听这个注入的对象的，会报堆栈溢出的错误。所以这里我用的是this.formData的形式注入。这样在子孙组件中可以通过'father.inputValue'这样的形式监听，也可以通过这样的形式：

  1. father: {
  2.       handler(val) {
  3.         console.log(val);
  4.       },
  5.       deep: true,
  6.     },

至于为什么会导致这个问题，我们先看下深度监听的实现方式：

在这里插入图片描述

这段注释什么意思呢，简单理解就是vue是通过递归遍历对象里面的每一个属性，将是对象的属性收集起来进行监听。众所周知，递归是很容易引起堆栈溢出的，而看下this对象就不难理解为什么会导致堆栈溢出了（太多了，而且是层层嵌套下去的）。
以上就是Vue组件通信的几种方式，如果还要在扯一扯，浏览器的缓存也可以作为一种手段。。。

到此这篇关于vue 组件通信的几种方式的文章就介绍到这了,更多相关vue 组件通信内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Vue.js热门文章

  • vue3中getCurrentInstance示例讲解
  • vue3页面跳转的两种方式
  • vue3动态加载对话框的方法实例
  • vue之Element-Ui输入框显示与隐藏方式
  • 封装vue基于element的select多选时启用鼠标悬停折叠文字以tooltip显示具体所选值
  • vue播放flv、m3u8视频流(监控)的方法实例
  • vue实现手机验证码登录
  • vue实现图片预览放大以及缩小问题
  • Vue自定义指令中无法获取this的问题及解决
  • uniapp组件uni-file-picker中设置使用照相机和相册权限的操作方法

    • Vue.js推荐文章

  • 《花100块做个摸鱼小网站! 》第四篇—前端应用搭建和完成第一个热搜组件
  • 卧槽，牛逼！vue3的组件竟然还能“暂停”渲染！
  • 给我5分钟，保证教会你在vue3中动态加载远程组件
  • 业务场景---Token无感刷新
  • 前端如何处理后端一次性返回10万条数据？
  • Vite本地构建：手写核心原理
  • 70%的人都答错了的面试题，vue3的ref是如何实现响应式的？
  • VUE系列之性能优化--懒加载
  • Vue 3 后端错误消息处理范例
  • useCookie函数：管理SSR环境下的Cookie

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号