Vue中如何正确运用provideinject实现组件间通信？

本文共计821个文字，预计阅读时间需要4分钟。

目录+前言+Vue中如何使用provide和inject+在Vue中使用注入访问父组件数据+前言+在Vue中，我们可以很方便地通过父组件向子组件传递属性，Props是我们将数据传递到子组件的主要方式之一。例如，目录+前言+Vue中如何使用provide和inject+在Vue中使用注入访问父组件数据+前言+在Vue中，我们可以很方便地通过父组件向子组件传递属性，Props是将数据传递到子组件的主要方式之一。

目录

• 前言
• Vue中如何使用provide和inject
• 在 Vue 中使用注入访问父数据

前言

在Vue中我们可以很方便的通过父组件往子组件传递属性，Props是我们将数据传递到子组件的主要方式之一。例如，下面的代码，我们往子组件（PopularList ）传递了属性name,其值是Most Popular Posts。在PopularList中我们可以通过name访问数据。

<PopularList name="Most Popular Posts" />

但是有时子组件中可以包含子组件，如果我们想将数据从父组件传递到孙子组件，最简单的方法就是使用provide/reject。这种方式的好处是：我们不需要将属性先传给子组件，再传给孙子组件。就像Parent → Child → GrandChild。