vue 中provide的用法_Vue多级组件provide/inject使用详解

这次给大家带来Vue多级组件provide/inject使用详解，Vue多级组件provide/inject使用的注意事项有哪些，下面就是实战案例，一起来看一下。

provide / inject 是 2.2 新增的方法，可以以一个祖先组件向所有子孙后代注入依赖(一个内容)。

provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。

Vue 官方警告：

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

当然，警告只是警告，你完全可以正常使用。

使用方法非常像 data 和 props 的组合大礼包：var Provider = {

provide: {

foo: 'bar'

// ...

}

var Child = {

inject: ['foo'],

created () {

console.log(this.foo) // => "bar"

}

// ...

}

唯一的区别是你不用再一层层的传入了，过去用的 event-bus 虽然可以解决深层问题，但是会导致整个 event-emit 组成过于混乱，难以维护。使用 provide / inject 可以保证父子单向数据流的清晰性。

在 React 中 Context 的 Provider / Consumer 也有相同的效果，由于还没有具体使用过，对 React 本身也只有一面之缘，留待以后在了解，感兴趣的同学可以阅读文档了解。

参考文章：

Vue 官方文档

Provide/Inject in Vue 2.2

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

vue 中provide的用法_Vue多级组件provide/inject使用详解相关推荐

vue中this.init用法_Vue中的this.$options.data()和this.$data用法说明
问题项目里遇到一个问题,用this.$options.data()重置组件data时,data()里用this获取的props或method都为undefined,代码简化如下: export de ...
vue中如何调用ios摄像头_vue2.0调用摄像头步骤详解
这次给大家带来vue2.0调用摄像头步骤详解,使用vue2.0调用摄像头的注意事项有哪些,下面就是实战案例,一起来看一下. 可以在github 上下载demo链接 vue组件代码 import {Ex ...
python中copytree的用法_python复制文件的方法实例详解
本文实例讲述了python复制文件的方法.分享给大家供大家参考.具体分析如下: 这里涉及Python复制文件在实际操作方案中的实际应用以及Python复制文件的相关代码说明,希望你会有所收获. Py ...
vue中定时器一般用法，定时器函数传参以及清除定时器
一.vue中定时器一般用法(举个例子) 显示当前时间, setInterval()方法会每秒执行一次函数,类似手表功能: <template><div class="use ...
vue中directives的用法
Vue中directives的用法关于 vue 中 directives 的用法问题,详细可以参考vue官方对directives的解释当前文章主要讲述directives怎么用,directiv ...
vue中，应用mapbox地图——地图组件mapbox-gl和语言包@mapbox/mapbox-gl-language地图英文转中文 accesstokens-访问令牌移动端地图-leaflet
vue中,应用mapbox地图--地图组件mapbox-gl和语言包@mapbox/mapbox-gl-language用于将地图上的英文转中文 & accesstokens-访问令牌 &am ...
vue的父子组件之间的通信详解
vue的父子组件之间的通信详解一.父组件给子组件传值父组件引入子组件,并对子组件进行监听 <template><div><h1&g ...
php 点号的用法,基于php中echo用逗号和用点号的区别详解
php 的基于php中echo用逗号和用点号的区别详解实例如下: echo 1+5; echo " "; echo '1+5='."1+5"." ...
【SAP Abap】BOM多级展开函数 CS_BOM_EXPL_MAT_V2 使用详解
SAP ABAP BOM多级展开函数 CS_BOM_EXPL_MAT_V2 使用详解 1.函数入参说明 2.函数出参说明 1.函数入参说明 CALL FUNCTION 'CS_BOM_EXPL_MAT ...

vue 中provide的用法_Vue多级组件provide/inject使用详解

vue 中provide的用法_Vue多级组件provide/inject使用详解相关推荐

最新文章

热门文章