vue3 provide inject

Vue3中的provide和inject是一种新的组件通信方式，它允许父组件向子组件传递数据，而不需要通过props或事件来传递。

provide和inject是成对出现的，provide用于提供数据，inject用于注入数据。在父组件中使用provide来提供数据，然后在子组件中使用inject来注入数据。

使用provide和inject的好处是可以避免props层层传递的问题，同时也可以避免事件总线的使用，使得组件之间的通信更加简单和直接。

相关问题

vue3 provide inject 响应

在Vue3中，provide和inject是一对新的API，用于跨层级传递数据，可以用于父组件向其所有子孙组件传递数据，而不需要一个个手动props传递。provide和inject的用法类似于Vue2中的props和$emit。

在Vue3中，provide与inject具有响应式能力，这意味着当provide向下传递的数据发生变化时，依赖这些数据的组件也会同步更新。

例如，一个父组件中定义了一个provide，如下所示：

const app = Vue.createApp({
  data() {
    return {
      name: "Vue 3",
    };
  },
  provide() {
    return {
      appName: Vue.computed(() => {
        return this.name;
      }),
    };
  },
});

在子组件中，可以使用inject来访问provide提供的数据，如下所示：

const Child = {
  inject: ["appName"],
  template: `
    <div>
      <p>App Name: {{appName}}</p>
    </div>
  `,
};

当name值发生变化时，appName也会同步更新。这种响应式机制使得provide和inject的使用更加灵活和方便，也更加符合Vue的响应式编程思想。

vue2 provide inject

在Vue2中，`provide`和`inject`可以用于父组件向子组件传递数据。父组件通过`provide`选项提供数据，并在子组件中使用`inject`选项接收数据。例如，在父组件中可以这样写：

export default {
  provide: {
    info: "提供数据"
  }
}

而在子组件中可以这样接收数据：

export default {
  inject: ['info'],
  mounted() {
    console.log("接收数据：", this.info) // 输出：接收数据：提供数据
  }
}

通过`provide`和`inject`可以实现父子组件之间的数据传递。在Vue2中，`provide`和`inject`不具备响应性，即当数据发生改变时，子组件不会自动更新。如果需要实现响应性，可以使用Vue的响应式系统，例如在Vue2中使用`Vue.observable`。<em>1</em><em>2</em><em>3</em>
#### 引用[.reference_title]
- *1* *2* *3* [vue中provide 和 inject 的用法](https://blog.csdn.net/zoukunyang/article/details/130111757)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item]
[ .reference_list ]