当前位置：首页 > news >正文

vue的 props 与 $emit 以及 provide 与 inject 的组件之间的传值对比

news 2025/11/5 13:40:16

好的，下面是 props 与 $emit 以及 provide 与 inject 的对比：

1. `props` 与 `$emit`

props：父组件通过 props 向子组件传递数据，子组件接收后不可修改。子组件只能读取 props 传递给它的数据。如果需要修改或更新父组件的状态，子组件必须通过 $emit 发射事件将变化传递回父组件。
$emit：子组件通过 $emit 向父组件发送事件通知，通常携带事件的相关数据。父组件通过事件监听器（@event）接收并处理事件，从而更新父组件的状态。

使用场景

props 用于父组件向子组件传递数据。
$emit 用于子组件向父组件传递事件或更新通知。

2. `provide` 与 `inject`

provide：父组件使用 provide 向其所有子孙组件提供一个数据源。provide 提供的是一个共享的数据源，所有子孙组件都可以通过 inject 获取到这些数据。provide 并不会创建副本，而是传递引用，所以子组件对数据的修改会直接影响父组件。
inject：子组件通过 inject 获取父组件（或祖先组件）通过 provide 提供的数据。通过 inject 获取到的数据通常可以直接修改（因为它是引用类型），不过需要注意可能会影响到父组件的状态。

使用场景

provide 和 inject 用于祖先组件与后代组件之间的数据传递。provide 提供数据，inject 接收数据，并且在需要时可以修改这些数据。

对比总结

特性	`props`	`$emit`	`provide`	`inject`
数据流	父组件 → 子组件	子组件 → 父组件	父组件 → 所有子孙组件	子组件 → 获取父组件或祖先组件的数据
数据修改	子组件不能直接修改父组件的数据	子组件通过 `$emit` 向父组件通知修改	子组件可以直接修改数据	子组件可以直接修改数据
用途	用于父组件向子组件传递数据	用于子组件向父组件发出事件	用于祖先组件向后代组件共享数据	用于后代组件接收祖先组件共享的数据
作用范围	仅限于父子组件之间	仅限于父子组件之间	祖先组件可以向所有子孙组件提供数据	后代组件可以接收祖先组件提供的数据
是否创建新副本	会为每个子组件创建数据的副本	不涉及数据副本	提供的数据是引用类型，不会创建副本	获取的是引用类型的数据
数据传递方式	单向数据流，父组件传递给子组件	子组件通过事件通知父组件	数据通过引用共享给所有后代组件	子组件通过引用访问祖先组件提供的数据
父子组件关系	父组件控制子组件的数据，子组件只读数据	子组件通知父组件，父组件处理事件	祖先组件与后代组件之间共享数据	后代组件通过 `inject` 获取祖先组件提供的数据

总结：

props 与 $emit 是 父子组件 之间常用的通信机制，父组件通过 props 传递数据给子组件，子组件通过 $emit 将事件和数据传递回父组件。
provide 与 inject 是 祖先组件与后代组件 之间的通信机制，适用于不直接相邻的组件之间的数据传递。provide 提供共享数据，inject 接收共享数据，且子组件可以修改这些数据。

除了 props 和 $emit、provide 和 inject，Vue 中还有其他几种数据传递和通信方式，特别是适用于不同组件间的交互。以下是一些常见的传值方式：

1. `v-model` 双向数据绑定

用法：v-model 是 Vue 提供的双向数据绑定的语法糖，主要用于父子组件之间的值传递。通过 v-model，子组件可以绑定父组件传递的值，并且可以修改这个值，父组件会接收到修改后的值。
工作原理：v-model 会在父组件中生成一个绑定的属性（通常是 value），子组件会通过 modelValue（Vue 3 中）或 value（Vue 2 中）接收这个值，并通过 $emit 发射事件更新值。

示例：

<!-- 父组件 -->
<child-component v-model="message"></child-component>

<!-- 子组件 -->
<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event)">
</template>

这样，v-model 可以实现父子组件的双向数据绑定。

2. 事件总线 (Event Bus)

用法：事件总线是通过 Vue 实例来实现组件之间的通信，适用于多个组件之间没有直接关系时的通信。父子组件关系无法满足的情况时，可以使用事件总线。
工作原理：通过 new Vue() 创建一个中央事件总线，将事件注册在事件总线上，其他组件可以通过 $on 监听事件，通过 $emit 触发事件。

示例：

// 在事件总线文件中创建一个 Vue 实例
export const EventBus = new Vue();

// 组件1：触发事件
EventBus.$emit('eventName', data);

// 组件2：监听事件
EventBus.$on('eventName', data => {
  // 处理数据
});

注意：事件总线通常不推荐用于大型应用，因为它可能导致难以追踪的状态和事件，尤其是当项目变大时。

3. Vuex 状态管理

用法：Vuex 是一个专为 Vue.js 应用程序开发的状态管理库，用于在不同组件之间共享状态。它是适用于跨组件、跨页面、跨模块的数据共享方案。
工作原理：Vuex 使用一个中央的 store 来存储数据，组件通过 store 访问状态并提交更改，Vuex 会自动更新相关组件的视图。

示例：

// Vuex store 配置
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

// 组件访问 Vuex 状态
this.$store.state.count;
this.$store.commit('increment');

适用场景：适用于复杂的状态管理，特别是当需要跨组件或跨页面共享和更新状态时，Vuex 是一个非常好的选择。

4. Scoped Slots (作用域插槽)

用法：作用域插槽允许子组件向父组件暴露数据，父组件可以通过插槽的作用域来访问这些数据。它是通过插槽和插槽内容传递数据的一种方式。
工作原理：通过作用域插槽，父组件可以传递函数给子组件，子组件通过插槽将数据传递给父组件使用。

示例：

<!-- 父组件 -->
<child-component>
  <template #default="{ item }">
    <p>{{ item.name }}</p>
  </template>
</child-component>

<!-- 子组件 -->
<template>
  <slot :item="item"></slot>
</template>

适用场景：当你想让父组件能够接收到子组件的数据并动态渲染子组件的内容时，可以使用作用域插槽。

5. Local Storage / Session Storage

用法：localStorage 和 sessionStorage 是浏览器提供的 Web 存储机制，它们可以存储数据并在不同的页面或组件之间共享。localStorage 是持久化存储，sessionStorage 在会话结束时清除。
工作原理：你可以通过 localStorage.setItem 或 sessionStorage.setItem 将数据存储到浏览器的本地存储中，然后在其他页面或组件中读取该数据。

示例：

// 存储数据
localStorage.setItem('key', 'value');

// 获取数据
const value = localStorage.getItem('key');

适用场景：适用于需要在多个页面或应用程序会话中保持数据的场景，尤其是需要跨页面共享数据时。

6. Cookie

用法：Cookie 是浏览器用于存储少量数据的机制，通常用于保存会话信息、用户认证信息等。
工作原理：通过 document.cookie 设置和读取 Cookie 数据，浏览器会在后续请求时自动带上 Cookie 数据。

示例：

// 设置 Cookie
document.cookie = "username=John Doe";

// 获取 Cookie
const cookies = document.cookie;

适用场景：适用于跨页面、跨会话的简单数据存储，特别是用户认证和会话信息。

总结对比

传值方式	适用场景	数据流	优点	缺点
`props` 与 `$emit`	父子组件之间的数据传递与事件处理	父 → 子，子 → 父	简单易用，直观，适用于父子组件间数据交互	只适用于父子组件关系
`provide` 与 `inject`	祖先组件与后代组件之间的数据传递	父 → 后代，子 → 祖先	适用于非直系组件间共享数据	可能引发数据依赖问题
`v-model`	双向绑定父子组件间的数据	父 ↔ 子	自动实现双向绑定	需要约定规范，可能引起混乱
`EventBus`	跨多个组件间的通信，尤其是非直接关系的组件	组件 → 组件	灵活，适用于多个组件之间的事件通信	难以追踪和管理，容易引发不必要的依赖
`Vuex`	跨多个组件、页面间共享复杂的状态管理	全局状态管理	强大的状态管理功能，适合大规模应用	配置和维护比较复杂
`Scoped Slots`	父组件控制子组件的内容，同时接收子组件暴露的数据	父 ↔ 子	灵活的内容插入机制	使用场景较为特定
`LocalStorage`/`SessionStorage`	跨页面数据共享，数据持久化	浏览器存储，跨页面	数据持久化，跨页面可访问	只适用于简单数据，不适合复杂状态
`Cookie`	跨会话共享数据，通常用于存储认证信息	跨会话，跨页面	浏览器自动管理，跨会话持久化	存储容量小，安全性较低