Vue2之使用provide与inject传递数据案例

Vue2之使用provide与inject传递数据案例

在Vue 2中，provide 和 inject 是一对用于在组件树中传递数据的高级选项。它们允许祖先组件向其所有子孙后代组件提供数据，而无需显式地通过 props 或事件进行传递。

• provide 选项是在祖先组件中声明的，它接受一个对象，其中包含您希望提供给后代组件的数据。通常，您会在父组件的 provide 选项中设置这些数据。
• inject 选项是在后代组件中声明的，它接受一个数组或一个对象。如果是数组，它列出了要注入的属性名称。如果是对象，则键是本地绑定的名称，而值是要注入的 prop 名称或包含了 from 和 default 字段的对象

1. 祖先组件使用provide提供数据

在Parent.vue中通过provide提供提供数据

export default {
  //提供数据，注意：这里提供数据与提供方法写法是有区别的，提供数据provide是对象,而提供方法时provide是函数,且提供的方法必须写在return对象中 
  provide: {
    message: 'Hello World!',
    count: 2
  }
}

2. 后代组件使用inject注入并使用数据

在后代组件Child.vue中使用inject来获取父组件提供的数据

// Child.vue
export default {
  //注入祖先组件提供的数据  
  inject: ['message', 'count'],
  mounted() {
    console.log(this.message); // 输出: Hello World!!
    console.log(this.count); // 输出: 2
  }
}

3. 注意事项

• provide 和 inject 绑定不是响应式的。这意味着当提供的值发生更改时，后代组件不会自动重新渲染。
• 使用 provide 和 inject 需要谨慎，因为它会创建祖先和后代之间的紧密耦合，增加了组件的复杂性。通常建议仅在共享全局状态时使用。
• 要注意命名冲突。因为 provide 提供的值是在整个组件树中全局可用的，所以确保键值不会与其他组件中的键值冲突。

在大型应用程序中，provide 和 inject 可以帮助您更方便地管理状态和共享数据，但请确保正确使用，以避免意外行为。