菜单 搜索
首页 前端知识 Vue 常用组件间通信方式

Vue 常用组件间通信方式

2024-08-25 23:08:19 前端知识 前端哥 45 5 我要收藏

Vue 常用组件间通信方式

1. 父子组件通信

1.1 Props

父组件通过 props 向子组件传递数据，子组件通过 props 接收数据。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent :message="parentMessage"></ChildComponent>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Hello from Parent',
    };
  },
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message'],
};
</script>

1.2 Event Emitting

子组件通过 $emit 触发事件，父组件监听事件并接收数据。

<!-- ChildComponent.vue -->
<template>
  <button @click="sendMessage">Send Message to Parent</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-from-child', 'Hello from Child');
    },
  },
};
</script>

<!-- ParentComponent.vue -->
<template>
  <ChildComponent @message-from-child="receiveMessage"></ChildComponent>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  methods: {
    receiveMessage(message) {
      console.log(message);
    },
  },
};
</script>

1.3 优缺点

Props 和 Event Emitting

优点

  • 简单直观：适用于父子组件之间的数据传递，易于理解和使用。
  • 单向数据流：保持了数据从父组件流向子组件，事件从子组件流向父组件的单向数据流，有助于维护数据的一致性和可预测性。
  • 明确的数据传递：通过 props 和事件，可以明确地看到数据的来源和去向。

缺点

  • 多级传递：在深层次组件结构中，可能需要逐级传递 props 和事件，导致代码冗长和复杂。
  • 事件管理：需要小心管理事件的触发和监听，避免事件名冲突和处理逻辑的混乱。

2. 兄弟组件通信

2.1 Event Bus

通过一个中央事件总线（Event Bus）在兄弟组件之间传递数据。

// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

在需要发送事件的组件中，通过 Event Bus 触发事件：

<!-- ComponentA.vue -->
<template>
  <button @click="sendMessage">Send Message to Component B</button>
</template>

<script>
import { EventBus } from './EventBus';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello from Component A');
    },
  },
};
</script>

在需要接收事件的组件中，通过 Event Bus 监听事件：

<!-- ComponentB.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script>
import { EventBus } from './EventBus';

export default {
  data() {
    return {
      message: '',
    };
  },
  created() {
    EventBus.$on('message', (msg) => {
      this.message = msg;
    });
  },
  beforeDestroy() {
    EventBus.$off('message'); // 避免内存泄漏
  },
};
</script>

2.2 优缺点

Event Bus

优点

  • 解耦合：通过中央事件总线进行通信，组件之间不需要直接引用对方，减少了组件之间的耦合度。
  • 灵活性高：可以在任何组件中触发和监听事件，适应不同的通信需求。
  • 简单易用：实现和使用都比较简单，适用于兄弟组件之间的通信。

缺点

  • 难以调试和维护：在大型应用中，事件的传递和监听链条可能会变得复杂，调试和维护会比较困难。
  • 事件命名冲突：如果没有良好的命名规范，事件名称可能会发生冲突，导致意外的问题。
  • 性能问题：如果频繁触发和监听大量事件，可能会对性能造成影响。

3. 跨层级组件通信

3.1 Provide/Inject

父组件通过 provide 提供数据，任意深度的子组件通过 inject 接收数据。

<!-- GrandparentComponent.vue -->
<template>
  <div>
    <parent-component></parent-component>
  </div>
</template>

<script>
import ParentComponent from './ParentComponent.vue';

export default {
  components: {ParentComponent},
  provide() {
    return {
      message: 'Hello from Grandparent',
    };
  },
  methods: {

  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  inject: ['message'],
};
</script>

3.2 优缺点

Provide/Inject

优点

  • 简化跨层级数据传递：避免逐级传递 props，简化了数据在多层组件之间的传递。
  • 解耦合：祖先组件和后代组件通过 provide 和 inject 进行数据共享，不需要直接引用对方，降低了组件间的耦合度。
  • 灵活性高：可以在任意层级的组件中使用，适用于多种复杂的组件结构。

缺点

  • 隐式数据依赖：数据依赖关系是隐式的，不如 props 和事件那样显式，可能会使代码的可读性和可维护性降低。
  • 单向数据流限制：inject 只能获取由 provide 提供的数据，不能直接修改提供的数据。如果需要修改数据，需要通过事件通知祖先组件进行更新。
  • 缺少响应式：provide 和 inject 提供的数据虽然是响应式的，但如果祖先组件的数据是通过对象解构或其他方式传递，可能会失去响应式特性。

4. 使用 Vuex 状态管理

4.1 Vuex

Vuex 是一个专为 Vue.js 应用开发的状态管理模式，适用于复杂的应用场景。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: 'Hello from Vuex',
  },
  mutations: {
    setMessage(state, newMessage) {
      state.message = newMessage;
    },
  },
});

<!-- ComponentOne.vue -->
<template>
  <button @click="updateMessage">Update Message</button>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations(['setMessage']),
    updateMessage() {
      this.setMessage('New Message from Component One');
    },
  },
};
</script>

<!-- ComponentTwo.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['message']),
  },
};
</script>

4.2 优缺点

Vuex 状态管理

优点

  • 全局状态管理：提供了一个全局的、响应式的数据存储，适用于复杂的应用场景。
  • 单向数据流：Vuex 通过单向数据流和严格的状态管理，有助于维护数据的一致性和可预测性。
  • 调试工具：提供了 Vue Devtools 插件，帮助开发者调试和管理状态。

缺点

  • 学习成本：引入了额外的复杂性和学习成本，特别是对于小型项目，可能显得过于繁琐。
  • 模板代码：需要编写大量的模板代码（actions、mutations、getters 等），增加了开发负担。
  • 性能开销：在频繁更新状态的场景中，可能会带来一定的性能开销。

5. $attrs 和 $listeners

$attrs 和 $listeners 是 Vue.js 提供的两个实例属性，用于父组件和子组件之间传递属性和事件。它们可以简化中间组件的代码，将属性和事件传递给深层次的子组件。

5.1 $attrs

$attrs 是一个包含了父组件传递给当前组件的所有属性（props 除外）的对象。使用 $attrs 可以将这些属性传递给子组件，特别是在中间组件不关心这些属性的情况下。

<!-- GrandparentComponent.vue -->
<template>
  <parent-component message="Hello from Grandparent" class="grandparent-class"></parent-component>
</template>

<script>
import ParentComponent from './ParentComponent.vue';

export default {
  components: { ParentComponent }
};
</script>

<!-- ParentComponent.vue -->
<template>
  <child-component v-bind="$attrs"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  inheritAttrs: false // 需要关闭属性继承，以便手动控制 $attrs
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message']
};
</script>

在这个示例中，GrandparentComponent 向 ParentComponent 传递了一个属性 message 和一个 class 属性。ParentComponent 通过 v-bind="$attrs" 将这些属性传递给 ChildComponent。ChildComponent 接收到 message 属性，并将其展示出来。

5.2 $listeners

$listeners 是一个包含了父组件传递给当前组件的所有事件监听器的对象。使用 $listeners 可以将这些事件监听器传递给子组件，特别是在中间组件不关心这些事件的情况下。

<!-- GrandparentComponent.vue -->
<template>
  <parent-component @custom-event="handleCustomEvent"></parent-component>
</template>

<script>
import ParentComponent from './ParentComponent.vue';

export default {
  components: { ParentComponent },
  methods: {
    handleCustomEvent() {
      console.log('Custom event handled in GrandparentComponent');
    }
  }
};
</script>

<!-- ParentComponent.vue -->
<template>
  <child-component v-on="$listeners"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <button @click="emitCustomEvent">Click Me</button>
</template>

<script>
export default {
  methods: {
    emitCustomEvent() {
      this.$emit('custom-event');
    }
  }
};
</script>

在这个示例中，GrandparentComponent 向 ParentComponent 传递了一个事件监听器 @custom-event。ParentComponent 通过 v-on="$listeners" 将这个事件监听器传递给 ChildComponent。ChildComponent 触发 custom-event 事件，最终由 GrandparentComponent 处理。

5.3 优缺点

$attrs 和 $listeners

优点

  • 简化中间组件的代码：通过 $attrs 和 $listeners，可以将属性和事件传递给深层次的子组件，减少中间组件的代码量。
  • 灵活性高：适用于需要将大量属性和事件传递给深层次组件的场景。

缺点

  • 隐式传递：数据和事件的传递是隐式的，可能会使代码的可读性和可维护性降低。
  • 仅适用于父子组件：只能用于父子组件之间的通信，无法解决跨层级或兄弟组件的通信问题。

6. ref 和 $refs

6.1 ref 和 $refs

适用于在父组件中直接访问子组件实例或 DOM 元素。

<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component ref="childRef"></child-component>
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  methods: {
    callChildMethod() {
      this.$refs.childRef.someChildMethod();
    },
  },
};
</script>

6.2 优缺点

ref 和 $refs

优点

  • 直接访问组件实例和 DOM 元素：可以在父组件中直接操作子组件的实例和模板中的 DOM 元素，方便进行复杂的操作。
  • 简单易用：语法简单，容易理解和使用。

缺点

  • 紧耦合：使用 ref 会使父组件和子组件紧密耦合，增加了组件之间的依赖性，不利于组件的复用和测试。
  • 仅限于父子组件通信：这种方式只能在父子组件之间使用，无法解决兄弟组件或跨层级组件的通信问题。

7. Scoped Slots 插槽

7.1 Scoped Slots

Scoped Slots 是 Vue.js 提供的一种强大的插槽机制，允许父组件向子组件传递数据或回调函数，并在子组件的插槽中使用这些数据或函数。

<!-- ParentComponent.vue -->
<template>
  <child-component>
    <template v-slot:default="slotProps">
      <div>{{ slotProps.message }}</div>
    </template>
  </child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot :message="message"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from Child'
    };
  }
};
</script>

7.2 优缺点

优点：

  • 灵活性高：父组件可以完全控制插槽内容，并且子组件可以通过插槽传递数据。
  • 解耦合：父子组件之间通过插槽通信，保持了组件的解耦合。
  • 适用复杂场景：适用于需要在父组件中自定义子组件内容的复杂场景。

缺点：

  • 学习成本：Scoped Slots 的概念和使用方法相对复杂，需要一定的学习成本。
  • 代码可读性：在模板中使用 Scoped Slots 可能会导致代码结构复杂，影响可读性。

8. Vue Router 导航守卫

8.1 Vue Router for Navigation Guards

Vue Router 的导航守卫可以在路由切换时进行组件间通信，特别是处理全局状态或数据加载。

// router.js
const router = new VueRouter({
  routes: [
    {
      path: '/some-path',
      component: SomeComponent,
      beforeEnter: (to, from, next) => {
        // 在导航时进行通信或状态更新
        console.log('Entering route');
        next();
      }
    }
  ]
});

8.2 优缺点

优点：

  • 适用导航相关逻辑：适用于处理导航相关的逻辑，如权限验证、数据加载等。
  • 全局控制：可以在路由级别控制组件的进入和离开，提供全局状态管理的机会。

缺点：

  • 限制性强：仅适用于导航相关的通信场景，不能广泛应用于一般的组件通信。

9. Mixins

9.1 Mixins

Mixins 是一种复用代码的机制，可以将可复用的逻辑注入到多个组件中，从而实现组件间的间接通信。

// myMixin.js
export const myMixin = {
  data() {
    return {
      mixinData: 'Hello from Mixin'
    };
  },
  methods: {
    mixinMethod() {
      console.log('Mixin method called');
    }
  }
};

<!-- MyComponent.vue -->
<template>
  <div>{{ mixinData }}</div>
</template>

<script>
import { myMixin } from './myMixin';

export default {
  mixins: [myMixin]
};
</script>

9.2 优缺点

优点：

  • 代码复用：可以将可复用的逻辑抽取到 mixin 中，减少重复代码。
  • 简化组件：通过 mixin 可以简化组件的代码，使组件更专注于自身逻辑。

缺点：

  • 命名冲突：不同组件混入同一个 mixin 时，可能会导致命名冲突。
  • 调试困难：由于 mixin 的逻辑分散在多个文件中，调试时可能会较为困难。

10. Vue Composition API

10.1 Vue Composition API

Vue Composition API 是 Vue 3 引入的一种新的逻辑复用机制，可以通过组合函数的方式将逻辑复用到多个组件中。

// useMyComposable.js
import { ref } from 'vue';

export function useMyComposable() {
  const data = ref('Hello from Composable');
  function method() {
    console.log('Composable method called');
  }
  return { data, method };
}

<!-- MyComponent.vue -->
<template>
  <div>{{ data }}</div>
</template>

<script>
import { useMyComposable } from './useMyComposable';

export default {
  setup() {
    const { data, method } = useMyComposable();
    method();
    return { data };
  }
};
</script>

10.2 优缺点

优点：

  • 逻辑复用：通过组合函数可以实现高效的逻辑复用。
  • 模块化：逻辑更加模块化，易于维护和测试。
  • 适用范围广：适用于各种场景的逻辑复用和组件通信。

缺点：

  • 学习成本：需要学习新的 API 和编程模式。
  • Vue 2 不完全支持：仅适用于 Vue 3 或引入了 Composition API 插件的 Vue 2 项目。

总结

在 Vue.js 中，组件间通信有多种方式，每种方式都有其适用的场景和优缺点。合理选择和组合这些方式，可以实现高效、清晰的组件间通信，满足不同的应用需求。常用的通信方式包括：

  1. Props 和 Event Emitting：适用于父子组件通信，简单直观，保持单向数据流。
  2. Event Bus：适用于兄弟组件通信，灵活高效，但难以调试和维护。
  3. Provide/Inject：适用于跨层级组件通信，简化数据传递，但存在隐式数据依赖。
  4. Vuex：适用于全局状态管理，适合大型应用，但引入了额外的复杂性。
  5. $attrs 和 $listeners：简化中间组件代码，适用于属性和事件的传递，但隐式传递可能影响可读性。
  6. ref 和 $refs：直接访问组件实例和 DOM 元素，适用于父子组件通信。
  7. Scoped Slots：灵活高效，适用于复杂的插槽内容传递。
  8. Vue Router for Navigation Guards：适用于导航相关逻辑的通信。
  9. Mixins：实现代码复用，但可能导致命名冲突和调试困难。
  10. Vue Composition API：高效的逻辑复用，适用于 Vue 3 项目。
转载请注明出处或者链接地址：https://www.qianduange.cn//article/16872.html
标签
组件通信
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

Vue学习JSON.parse(）与JSON.stringify(）对象与字符串互转

2024-09-04 23:09:44

LoopBack组件JSONAPI使用指南

2024-09-04 23:09:43

用了几年的 Fastjson，我最终替换成了Jackson！

2024-09-04 23:09:12

编译JSONCPP源码

2024-09-04 23:09:49

SpringBoot——请求响应（简单参数、实体参数、数组集合参数、日期参数、JSON参数、路径参数、统一响应结果）

2024-09-04 23:09:24

【OpenHarmony-NDK技术】简单将cJson移植到OpenHarmony中，并在c层修改参数值再返回json

2024-09-04 23:09:23

node.js如何使用JWT（JSON Web Token）进行认证？

2024-09-04 23:09:21

（最新亲测有效）python中操作json文件追加数据

2024-09-04 23:09:21

FastJson转化时BigDecimal与Double问题

2024-09-04 23:09:21

npm全局安装失败，报-4048错误（ -4048npm ERR! Error: EPERM: operation not permitted, open ‘D:\

2024-09-04 23:09:13

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
3

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
4

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
5

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
6

npm的使用

2024-08-18 00:08:131000
7

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
8

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
9

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
10

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！