Vue 常用组件间通信方式

WalkingWithTheWind～2024-08-03 12:35

Vue 常用组件间通信方式

1. 父子组件通信

1.1 Props

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

vue 复制代码 
<!-- 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>
vue 复制代码 
<!-- ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

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

1.2 Event Emitting

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

vue 复制代码 
<!-- 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>
vue 复制代码 
<!-- 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）在兄弟组件之间传递数据。

javascript 复制代码 
// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

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

vue 复制代码 
<!-- 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 监听事件：

vue 复制代码 
<!-- 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 接收数据。

vue 复制代码 
<!-- 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>
vue 复制代码 
<!-- 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 应用开发的状态管理模式，适用于复杂的应用场景。

javascript 复制代码 
// 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;
    },
  },
});
vue 复制代码 
<!-- 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>
vue 复制代码 
<!-- 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 可以将这些属性传递给子组件，特别是在中间组件不关心这些属性的情况下。

vue 复制代码 
<!-- 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>
vue 复制代码 
<!-- 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>
vue 复制代码 
<!-- 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 可以将这些事件监听器传递给子组件，特别是在中间组件不关心这些事件的情况下。

vue 复制代码 
<!-- 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>
vue 复制代码 
<!-- ParentComponent.vue -->
<template>
  <child-component v-on="$listeners"></child-component>
</template>

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

export default {
  components: { ChildComponent }
};
</script>
vue 复制代码 
<!-- 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 元素。

vue 复制代码 
<!-- 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 提供的一种强大的插槽机制，允许父组件向子组件传递数据或回调函数，并在子组件的插槽中使用这些数据或函数。

vue 复制代码 
<!-- 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>
vue 复制代码 
<!-- 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 导航守卫

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

js 复制代码 
// 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 是一种复用代码的机制，可以将可复用的逻辑注入到多个组件中，从而实现组件间的间接通信。

js 复制代码 
// myMixin.js
export const myMixin = {
  data() {
    return {
      mixinData: 'Hello from Mixin'
    };
  },
  methods: {
    mixinMethod() {
      console.log('Mixin method called');
    }
  }
};
vue 复制代码 
<!-- 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 引入的一种新的逻辑复用机制，可以通过组合函数的方式将逻辑复用到多个组件中。

js 复制代码 
// 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 };
}
vue 复制代码 
<!-- 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 项目。
相关推荐
桂月二二4 小时前
探索前端开发中的 Web Vitals —— 提升用户体验的关键技术
前端·ux
CodeClimb5 小时前
【华为OD-E卷 - 第k个排列 100分（python、java、c++、js、c）】
java·javascript·c++·python·华为od
沈梦研5 小时前
【Vscode】Vscode不能执行vue脚本的原因及解决方法
ide·vue.js·vscode
hunter2062065 小时前
ubuntu向一个pc主机通过web发送数据，pc端通过工具直接查看收到的数据
linux·前端·ubuntu
qzhqbb5 小时前
web服务器 网站部署的架构
服务器·前端·架构
刻刻帝的海角5 小时前
CSS 颜色
前端·css
轻口味6 小时前
Vue.js 组件之间的通信模式
vue.js
九酒6 小时前
从UI稿到代码优化，看Trae AI 编辑器如何帮助开发者提效
前端·trae
浪浪山小白兔7 小时前
HTML5 新表单属性详解
前端·html·html5
lee5767 小时前
npm run dev 时直接打开Chrome浏览器
前端·chrome·npm
热门推荐
01centos7 init.d 和system.d02Dell服务器升级ubuntu 22.04失败解决03半导体应用系统一些小知识收集(strip&wafer mapping,EAP&scada)04PyTorch AMP 混合精度中grad_scaler.py的scale函数解析05Windows10安装PCL1.14.0及点云配准06密码学原理技术-第六章-introduction to pulibc-key cryptography07xgboost: Why not implement distributed XGBoost on top of spark08Oracle Scheduler: Calendaring09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10BMC 虚拟i2c访问PCA9545(switch芯片)后面的设备,为什么找不到PCA9545?