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

在Vue 2中,provideinject 是一对用于在组件树中传递数据的高级选项。它们允许祖先组件向其所有子孙后代组件提供数据,而无需显式地通过 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. 注意事项

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

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

GitHub 加速计划 / vu / vue
86
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079 [skip ci] 4 个月前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐