vue provider inject,vue provide inject实现原理

　　在查看element-ui的源代码时，我注意到源代码中有很多地方使用了provide和inject属性。主要介绍vue2提供注入交付响应的实现，分享给大家。有兴趣的可以看看。

1. vue2 中的常规写法

　　//父组件提供“foo”

　　var提供商={

　　data(){

　　返回{

　　foo:“酒吧”

　　}

　　}

　　提供：{

　　fo provide:this.foofn//Pass过去的一个引用类型函数

　　},

　　方法：{

　　fooFn() {

　　返回this.foo

　　}

　　}

　　}

　　var Child={

　　注入：[fooProvide]，

　　计算值：{

　　fooComputed(){

　　return . foo provide()//因为传递的函数是引用类型。

　　}

　　}

　　已创建(){

　　控制台. log(this.fooComputed)

　　}

　　//.

　　}

2. vue2 中的不太常规写法，但用得舒服.(大概用法还是一样，只是传递的值变成 this-- 整个实例)

　　//父组件提供“foo”

　　var提供商={

　　data(){

　　返回{

　　foo:酒吧，

　　其他：.

　　}

　　}

　　提供：{

　　App:这个//把整个这个过去

　　},

　　已安装(){

　　const那个=这个

　　setTimeout(()={

　　That.foo=更改值

　　},4000)

　　}

　　}

　　var Child={

　　注入：[app]，

　　已创建(){

　　console . log(this . app . foo)//this . app以下都是有响应的，因为都是同一个实例下的引用。

　　}

　　//.

　　}

3. vue2 + ts (因为ts之前没用过的话确实不知道怎么用，所以示例一下)

　　提供模式：

　　1.@Provide() foo=foo

　　2.@Provide(bar) baz=bar

　　注入模式：

　　1.@Inject() foo: string

　　2.@Inject(bar) bar: string

　　3.@注入(s) baz: string

　　示例：

　　//父组件提供“fooProvide”

　　@Provide(fooProvide) //随意命名。和接收是一样的。但它通常与以下变量相同

　　变量fo provide=this.refreshnumfn//receives要传递的值。

　　refreshNumFn() {

　　返回this.refreshNum

　　}

　　//子组件接收

　　@ Inject( foo provide )foo provide:any

　　获取valueA(): any {

　　返回this.fooProvide()

　　}

　　已安装(){

　　console.log(this.valueA) //.

　　}

　　关于vue2提供注入交付响应的实现，本文到此结束。有关vue2 provide inject的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。