介绍 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();

  }

};

  &lt;data&gt;

    &lt;data-item&gt;&lt;/data-item&gt;

  &lt;/data&gt;

&lt;/template&gt;

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

项目中实际应用

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

例如：

```<app>
<app-header></app-header> 
<app-navigation></app-navigation> 
...
<app-footer></app-footer>
</app>
```

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

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

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

来源：https://segmentfault.com/a/1190000016874566

巴特西

介绍Provide以及Inject

介绍 Vue 的 Provide 以及 Inject

具体用法

项目中实际应用

最新文章

热门文章