学习vue源码（18）三探生命周期之初始化provide与inject

最新推荐文章于 2024-04-23 18:39:26 发布

前端阳光

最新推荐文章于 2024-04-23 18:39:26 发布

阅读量966

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43964148/article/details/106742974

版权

上篇文章学习vue源码（17）再探生命周期之初始化实例属性及事件讲解了初始化阶段的

    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)

即beforeCreate钩子函数触发前对实例属性和事件的初始化。

  // src/core/instance/init.js
  Vue.prototype._init = function (options?: Object) {
   
    ……
    vm._self = vm
    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')
  }

这一次来讲解 created钩子函数触发前，beforeCreate触发后的initInjections和initProvide，可能你会问为什么initState为什么不一起讲呢，因为initState也是一个大块头，放到后面单独讲一下。

概念解析

成对出现：provide和inject是成对出现的

作用：用于父组件向子孙组件传递数据

使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。

使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据

使用

provide和inject需要配合使用，是多层级组件的通信方式。相信，面试问vue组件间有哪些通信方式，就会提到这个。（什么？你说你不知道。。。，那正好可以了解下，下次有得说了）

简单的说，当组件的引入层次过多，我们的子孙组件想要获取祖先组件的资源，那么怎么办呢，总不能一直取父级往上吧，而且这样代码结构容易混乱。这个就是这对选项要干的事情

provide和inject需要配合使用，它们的含义如下:

provide:一个对象或返回一个对象的函数，该对象包含可注入起子孙的属性，可以使用ES6的Symbols作为key(只有原生支持Symbol才可以)

inject:inject 选项应该是一个字符串数组或一个对象，该对象的 key 代表了本地绑定的名称，value 为其 key (字符串或 Symbol) 以在可用的注入中搜索。

来个例子理解一下

<!DOCTYPE html>   　
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <title>Document</title>    
</head>

最低0.47元/天解锁文章

前端阳光

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学习vue源码（18）三探生命周期之初始化provide与inject

上篇文章学习vue源码（17）再探生命周期之初始化实例属性及事件讲解了初始化阶段的 initLifecycle(vm) initEvents(vm) initRender(vm)即beforeCreate钩子函数触发前对实例属性和事件的初始化。 // src/core/instance/init.js Vue.prototype._init = function (options?: Object) { …… vm._self = vm ini.
复制链接

扫一扫