Vue组件之间四种通信方式详解

2024-04-02 19:04:59 493人浏览八月长安

摘要

目录前言父子组件通信父组件与子孙组件的通信父组件获取子组件数据无需考虑组件关系的通信前言 Vue 框架提供了前端开发组件的思想，可以通过组件来组合成一个完整的页面，都是随着组

前言

Vue 框架提供了前端开发组件的思想，可以通过组件来组合成一个完整的页面，都是随着组件数量原来越多，组件之间难免需要相互通信，那么如何实现组件之间的通信呢？下面介绍 vue 组件通信的几种方法

父子组件通信

父组件传递 props 给子组件（数据以及改变数据的方法），子组件通过 $emit 来更新父组件的状态

父组件定义，声明状态 { name: 'baidu.com' } 以及可以改变状态的方法update()，通过 name 传递和 @update 把 name 属性和 update 方法传递给子组件

<template>
  <div>
    <Child : @update="update" />
  </div>
</template>

<script>
  import Child from "./components/Child";

  export default {
    name: "App",
    components: {
      Child,
    },
    data() {
      return {
        name: "baidu.com",
      };
    },
    methods: {
      update() {
        this.name = "www.baidu.com";
      },
    },
  };
</script>vue

子组件的定义，定义 props 接收 name 属性，通过 $emit 传递 update 参数通知父组件更新状态

<template>
  <div>
    {{ name }}
    <button @click="$emit('update')">通知父组件数据</button>
  </div>
</template>

<script>
  export default {
    name: "Child",
    props: {
      name: String,
    },
  };
</script>

父组件与子孙组件的通信

父组件通过 provide 创建对象，子组件通过 inject 来使用父组件的数据，不受组件层级的限制

父组件通过 provide 定义需要传递是数据

<template>
  <div>
    <Child />
  </div>
</template>

<script>
  import Child from "./components/Child";

  export default {
    name: "App",
    components: {
      Child,
    },
    provide: {
      name: "www.baidu.com",
    },
  };
</script>

子组件通过 inject 属性控制哪些属性需要访问

<template>
  <div>{{ name }}</div>
</template>

<script>
  export default {
    name: "Child",
    inject: ["name"],
  };
</script>

父组件获取子组件数据

通过ref 来获取子组件的实例，可以获取子组件的状态或者调用子组件的方法，例如下面

<template>
  <div>
    <Child ref="child" />
  </div>
</template>

<script>
  import Child from "./components/Child";

  export default {
    name: "App",
    components: {
      Child,
    },
    mounted() {
      console.log(this.$refs.child.title);
    },
  };
</script>

可以通过 this.$refs.child 获取到 Child 组件的实例，访问 Child 组件的 data

无需考虑组件关系的通信

通过 vue 提供的发布订阅模式，也叫做 EventBus（事件总线）

定义一个 eventBus 实例

import Vue from "vue";
export default new Vue();

父组件在 mounted 生命周期里面通过 $on 监听 update 事件

<template>
  <div>
    <Child : />
  </div>
</template>

<script>
  import Child from "./components/Child";
  import eBus from "../eventBus";

  export default {
    name: "App",
    data() {
      return {
        name: "baidu.com",
      };
    },
    components: {
      Child,
    },
    mounted() {
      eBus.$on("update", (val) => {
        
        this.name = val;
      });
    },
  };
</script>

子组件通过 vue 实例的 $emit 触发 update 事件

<template>
  <div>
    {{ name }}
    <button @click="clickHandle">通知父组件更新</button>
  </div>
</template>

<script>
  import eBus from "../../eventBus";

  export default {
    name: "Child",
    props: {
      name: String,
    },
    data() {
      return {
        title: "child component",
      };
    },
    methods: {
      clickHandle() {
        
        eBus.$emit("update", "Hello World");
      },
    },
  };
</script>

使用全局状态管理库 vuex

具体就不在这里展开讲，有兴趣的可以查阅 vue 官方文档

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

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vue组件之间四种通信方式详解

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

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

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Vue组件之间四种通信方式详解

目录前言父子组件通信父组件与子孙组件的通信父组件获取子组件数据无需考虑组件关系的通信前言 vue 框架提供了前端开发组件的思想，可以通过组件来组合成一个完整的页面，都是随着组...

99+

2022-11-12
Vue组件之间的通信方式详细讲解

目录前言一、父级传数据给子级1、传输固定的具体数据2、动态语法3、子组件调用父组件二、子级传数据给父级1、使用自定义事件2、$refs的使用3、同级别组价以及任意组件之间的数据传递前...

99+

2022-11-13
Vue非父子组件之间的通信方式详解

目录非父子组件的通信1.Provide和Inject1.1基本使用1.2处理响应式数据(了解)2.全局事件总线总结非父子组件的通信此篇讲解的是, 在学习状态管理之前, 非父子间通信...

99+

2022-11-13
详解React中组件之间通信的方式

一、是什么我们将组件间通信可以拆分为两个词：组件通信回顾Vue系列的文章，组件是vue中最强大的功能之一，同样组件化是React的核心思想相比vue，...

99+

2022-11-12
Vue组件间通信有哪几种方式

这篇文章将为大家详细讲解有关Vue组件间通信有哪几种方式，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。Vue 组件间通信有哪几种方式？Vue 组件间通信是面试常考的知识点...

99+

2022-10-19
Vue组件间的通信方式详析

目录前言组件之间通信的场景父子组件之间的通信父组件通过 prop 向子组件传递数据子组件通过自定义事件向父组件传递数据兄弟组件之间的通信状态提升隔代组件之间的通信attrs/attr...

99+

2022-11-13
Vue3父子组件间传参通信的四种方式

目录前言一、父传子 defineProps二、子传父 defineEmits三、子组件暴露属性给父组件 defineExpose四、依赖注入Provide / Inject参考总结前...

99+

2023-05-19

vue父子组件如何传递参数 vue父子组件传值的方法 vue组件传参方式
vue中组件之间相互通信传值的几种方法详解

目录vue中组件之间相互通讯传值的方式1、子组件和父组件通讯，通过调用父组件给组件自定义属性值来实现2、父组件主动获取子组件数据3、使用provide/inject方法实现4、使用事...

99+

2022-11-13
vue组件之间通信方式有哪些

这篇文章将为大家详细讲解有关vue组件之间通信方式有哪些，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。具体如下：对于vue来说，组件之间的消息传递是非常重要的，下面是我对...

99+

2022-10-19
Vue组件之间的通信方式(推荐!)

目录一、组件间通信的概念二、组件间通信解决了什么二、组件间通信的分类三、组件间通信的方案props传递数据$emit 触发自定义事件refEventBusparent或parent ...

99+

2022-11-13
Vue组件的通信方式详解

目录组件间通信的概念组件间通信解决了什么？组件间通信的分类组件间通信的方案props传递数据$emit 触发自定义事件refEventBus$parent 或 $root$attrs...

99+

2023-05-15

Vue组件间的通信方式 Vue组件间通信
vue组件通信的多种方法详解

目录1. 父传子2. 子传父3. 非父子组件传值4. vuex5. refs6. $children7. $parent8. provide & inject9. $attr...

99+

2022-11-12
Vue3组件间的通信方式详解

目录1、父子组件通信1.1 defineProps1.2 provide/inject2.子父组件通信2.1 defineEmits2.2 v-model:xxx+emit在写 vu...

99+

2023-05-17

Vue3组件通信 Vue3组件通信方式
Vue组件之间的通信方式是什么

本篇内容介绍了“Vue组件之间的通信方式是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！一、组件间通信的概念开始之前，我们把组件间通信这...

99+

2023-07-02
Vue组件间怎么通信？六种方式浅析

Vue组件间怎么通信？下面本篇文章给大家介绍一下Vue组件通信的六种方式，希望对大家有所帮助！组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有几种关系.针对...

99+

2023-05-14

组件通信前端 Vue.js
详解Vue3的七种组件通信方式

目录写在前面举一个栗子Props方式emit方式v-model方式refs方式provide/inject方式事件总线状态管理工具写在前面本篇文章是全部采用的<script ...

99+

2022-11-13
vue 组件通信的多种方式

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

99+

2022-11-13
Vue实现组件间通信的几种方式(多种场景)

目录1、Props 父 >>> 子（Props）子 >>> 父（$emit）2、Bus事件总线3、V...

99+

2022-11-12
深入了解Vue组件七种通信方式

目录1.props/$emit简介代码实例2.v-slot简介代码实例3.$refs/ $parent/$children/$root简介代码实例4.$attrs/$listener...

99+

2022-11-12
vue组件通信有哪几种方式

vue中组件通信的方式有：1.使用props/$emit实现父子组件通信；2.使用$refs/$parent/$children/$root实现父子组件通信；3.使用$attrs/$listener实现隔代组件通信；4.使用provide/...

99+

2022-10-22