脚本宝典收集整理的这篇文章主要介绍了介绍Provide以及Inject，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

介绍 Vue 的 Provide 以及 Inject

Provide 以及 Inject 是 Vue 中用于祖先元素向其所有后台元素注入依赖的接口。

具体用法

// Data.vue
...
export default {
  provide: {
    setData: 'setData'
  },
  methods: {
    setdata() {
      //Something
    }
  }
};

// DataItem.vue
...
export default {
  inject: ['setData'],
  created() {
    this.setdata();
  }
};

<template>
  <data>
    <data-item></data-item>
  </data>
</template>

• 注意：通过 Inject 获得的属性是不可响应的。

项目中实际应用

在项目中，如需要两个基础组件的父子组件进行通信，又不想写太多业务无关代码，就可以使用 Provide 以及 Inject。

例如：

<app>
  <app-header></app-header> <!-- 在App中开启header的显示 -->
  <app-navigation></app-navigation> <!-- 在App中开启navigation的显示 -->
  ...
  <app-footer></app-footer><!-- 在App中开启footer的显示 -->
</app>

仅需要简单的调用组件，而不需要传递 Prop 的值以及定义 Slot。

当然也可以使用一个全局对象实现，使用 Provide 以及 Inject 好处是可多页面复用以及较为简单。

如果需求比较复杂，还是使用一个全局的 Vue 对象或 Vuex 更好。

脚本宝典总结

以上是脚本宝典为你收集整理的介绍Provide以及Inject全部内容，希望文章能够帮你解决介绍Provide以及Inject所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。