扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue 组件通信的多种方式
  • 529

0
分享到

vue 组件通信的多种方式

2024-04-02 19:04:59 529人浏览 安东尼
摘要

目录前言一、Vuex二、eventBus三、props/emit四、$parent/$children五、$attrs/$listeners六、provide/inject前言 在v

前言

在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修饰的所有绑定事件。具体来看下例子：

<template>
  <div>
    <p>父组件</p>
    <input type="text" v-model="fORMData.inputValue" />
    <p>子组件</p>
    <Son
      :inputValue="formData.inputValue"
      :otherValue="otherValue"
      @success="success"
      @input.native="handleInput"
      v-bind="$attrs"
      v-on="$listeners"
    ></Son>
  </div>
</template>
<script>
import Son from "./son.vue";
export default {
  components: { Son },
  provide() {
    return {
      father: this.formData,
    };
  },
  data() {
    return {
      formData: {
        inputValue: "123",
      },
      otherValue: 999,
    };
  },
  methods: {
    success(data) {
      console.log(data);
    },
    handleInput() {},
  },
};
</script>


<template>
  <div>
    <input type="text" v-model="inputValue" @change="handleChange" />
  </div>
</template>
<script>
export default {
  props: {
    inputValue: String,
  },
  created() {
    console.log(this.$attrs, "son---$attrs");
    console.log(this.$listeners, "son---$listeners");
  },
  methods: {
    handleChange() {
      this.father.inputValue = this.inputValue;
    },
  },
};
</script>

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

在这里插入图片描述

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

<template>
  <div>
    <input type="text" v-model="inputValue" @change="handleChange" />
    <GrandSon v-bind="$attrs" v-on="$listeners"></GrandSon>
  </div>
</template>
<script>
import GrandSon from "./grandSon.vue";
export default {
  components: { GrandSon },
  props: {
    inputValue: String,
  },
  created() {
    console.log(this.$attrs, "son---$attrs");
    console.log(this.$listeners, "son---$listeners");
  },
  methods: {
    handleChange() {
      this.father.inputValue = this.inputValue;
    },
  },
};
</script>


<template>
  <div>
    <input type="text" v-model="inputValue" @change="handleChange" />
  </div>
</template>
<script>
export default {
  props: {
    inputValue: String,
  },
  created() {
    console.log(this.$attrs, "grandSon---$attrs");
    console.log(this.$listeners, "grandSon---$listeners");
  },
  methods: {
    handleChange() {
      this.father.inputValue = this.inputValue;
    },
  },
};
</script>

在这里插入图片描述

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

六、provide/inject

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

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

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

<template>
  <div>
    <p>父组件</p>
    <input type="text" v-model="inputValue" />
    <p>子组件</p>
    <Son></Son>
    <p>孙组件</p>
    <GrandSon></GrandSon>
  </div>
</template>
<script>
import Son from "./son.vue";
import GrandSon from "./grandSon.vue";
export default {
  components: { Son, GrandSon },
  provide() {
    return {
      father: this.inputValue,
    };
  },
  data() {
    return {
      inputValue: "123",
    };
  },
};
</script>

子组件：

<template>
  <div>
    <input type="text" v-model="inputValue" @change="handleChange" />
  </div>
</template>
<script>
export default {
  inject: ["father"],
  data() {
    return {
      inputValue: "",
    };
  },
  watch: {
    father(val) {
      console.log(val, "val");
      this.inputValue = val;
    },
  },
  created() {
    console.log(this, "this");
  },
  methods: {
    handleChange() {
      this.father.inputValue = this.inputValue;
    },
  },
};
</script>

在子组件打印this：

在这里插入图片描述

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

请添加图片描述

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

<template>
  <div>
    <p>父组件</p>
    <input type="text" v-model="formData.inputValue" />
    <p>子组件</p>
    <Son></Son>
    <p>孙组件</p>
    <GrandSon></GrandSon>
  </div>
</template>
<script>
import Son from "./son.vue";
import GrandSon from "./grandSon.vue";
export default {
  components: { Son, GrandSon },
  provide() {
    return {
      father: this.formData,
    };
  },
  data() {
    return {
      formData: {
        inputValue: "123",
      },
    };
  },
};
</script>
<template>
  <div>
    <input type="text" v-model="inputValue" @change="handleChange" />
  </div>
</template>
<script>
export default {
  inject: ["father"],
  data() {
    return {
      inputValue: "",
    };
  },
  watch: {
    'father.inputValue'(val){
      console.log(val, "val");
      this.inputValue = val;
    },
  },
  created() {
    console.log(this, "this");
  },
  methods: {
    handleChange() {
      this.father.inputValue = this.inputValue;
    },
  },
};
</script>

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

在这里插入图片描述

请添加图片描述

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

father: {
      handler(val) {
        console.log(val);
      },
      deep: true,
    },

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

在这里插入图片描述

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

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

--结束END--

本文标题: vue 组件通信的多种方式

本文链接: https://lsjlt.com/news/141118.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue 组件通信的多种方式
    目录前言一、vuex二、eventBus三、props/emit四、$parent/$children五、$attrs/$listeners六、provide/inject前言 在v...
    99+
    2024-04-02
  • Vue实现组件间通信的几种方式(多种场景)
    目录1、Props 父 >>> 子  （Props）子 >>> 父 （$emit）2、Bus事件总线3、V...
    99+
    2024-04-02
  • vue组件通信的多种方法详解
    目录1. 父传子2. 子传父3. 非父子组件传值4. vuex5. refs6. $children7. $parent8. provide & inject9. $attr...
    99+
    2024-04-02
  • vue组件通信有哪几种方式
    vue中组件通信的方式有：1.使用props/$emit实现父子组件通信；2.使用$refs/$parent/$children/$root实现父子组件通信；3.使用$attrs/$listener实现隔代组件通信；4.使用provide/...
    99+
    2024-04-02
  • Vue组件间通信有哪几种方式
    这篇文章将为大家详细讲解有关Vue组件间通信有哪几种方式，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。Vue 组件间通信有哪几种方式？Vue 组件间通信是面试常考的知识点...
    99+
    2024-04-02
  • Vue组件通信传递数据的三种方式
    目录Vue传值传递数据的三种方式方式一方式二方式三Vue传值 Vue.js是一个组件化的前端开发框架，支持父子组件之间的消息传递和数据通信。子组件向父组件传递消息的过程称为&ldqu...
    99+
    2023-05-17
    Vue组件通信几种方式 Vue组件通信实现
  • 深入了解Vue组件七种通信方式
    目录1.props/$emit简介代码实例2.v-slot简介代码实例3.$refs/ $parent/$children/$root简介代码实例4.$attrs/$listener...
    99+
    2024-04-02
  • Vue组件之间四种通信方式详解
    目录前言父子组件通信​父组件与子孙组件的通信​父组件获取子组件数据​无需考虑组件关系的通信​前言 vue 框架提供了前端开发组件的思想，可以通过组件来组合成一个完整的页面，都是随着组...
    99+
    2024-04-02
  • Vue组件的通信方式详解
    目录组件间通信的概念组件间通信解决了什么？组件间通信的分类组件间通信的方案props传递数据$emit 触发自定义事件refEventBus$parent 或 $root$attrs...
    99+
    2023-05-15
    Vue组件间的通信方式 Vue组件间通信
  • 八种vue实现组建通信的方式
    目录一、组件通信1、props 父组件--->子组件通信2、$emit 子组件--->父组件传递3、bus(事件总线) 兄弟组件通信4、$parent、$children...
    99+
    2024-04-02
  • Vue组件间怎么通信？六种方式浅析
    Vue组件间怎么通信？下面本篇文章给大家介绍一下Vue组件通信的六种方式，希望对大家有所帮助！组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有几种关系.针对...
    99+
    2023-05-14
    组件通信 前端 Vue.js
  • Vue组件间的通信方式详析
    目录前言组件之间通信的场景父子组件之间的通信父组件通过 prop 向子组件传递数据子组件通过自定义事件向父组件传递数据兄弟组件之间的通信状态提升隔代组件之间的通信attrs/attr...
    99+
    2024-04-02
  • Vue组件的通信方式是什么
    本篇内容主要讲解“Vue组件的通信方式是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue组件的通信方式是什么”吧!组件间通信的概念开始之前，我们把组件间通信这个词进行拆分组件通信都知道组...
    99+
    2023-07-06
  • vue通过子组件修改父组件prop的多种实现方式
    目录前言常用方式1. 通过父组件on监听子组件emit事件实现修改prop2. 通过父组件sync修饰符 + 子组件emit事件实现修改prop取巧方式3.通过data实现修改pro...
    99+
    2024-04-02
  • 怎样深入了解Vue组件七种通信方式
    怎样深入了解Vue组件七种通信方式，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。vue组件通信的方式，这是在面试中一个非常高频的问题，我刚开始找实习便经常遇到这个问题，当时只知...
    99+
    2023-06-22
  • vue组件通信方式有哪些
    vue中实现组件通信的方式有：1.通过props传递实现组件通信；2.使用ref设置父子组件实现组件通信；3.使用parent创建兄弟组件通信侨联实现组件通信；4.使用provide与inject定义祖后代组件实现组件通信；vue中实现组件...
    99+
    2024-04-02
  • 详解Vue3的七种组件通信方式
    目录写在前面举一个栗子Props方式emit方式v-model方式refs方式provide/inject方式事件总线状态管理工具写在前面 本篇文章是全部采用的<script ...
    99+
    2024-04-02
  • Vue3的10种组件通信方式总结
    目录引言Propsemitsexpose / refNon-Props单个根元素的情况多个元素的情况v-model单值的情况多个 v-model 绑定v-model 修饰符插槽 sl...
    99+
    2024-04-02
  • Vue中的组件通信方式有哪些
    Vue中的组件通信方式有哪些，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。vue组件中关系说明:如上图所示, A与B、A与C、...
    99+
    2024-04-02
  • Vue组件之间的通信方式(推荐!)
    目录一、组件间通信的概念二、组件间通信解决了什么二、组件间通信的分类三、组件间通信的方案props传递数据$emit 触发自定义事件refEventBusparent或parent ...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作