Vue源码逐行解析十一 initProvide函数(初始化Provide参数)

ztj100 2024-11-12 14:22 10 浏览 0 评论

首先我们打开'src/core/instance/inject.js'文件，代码如下：

export function initProvide (vm: Component) {
  const provide = vm.$options.provide
  if (provide) {
    vm._provided = typeof provide === 'function'
      ? provide.call(vm)
      : provide
  }
}

首先我们引用官网的一句话：

provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。

可以看到这个基本上是我们目前分析过的最简单的一个函数了，基本是分3步走。

const provide = vm.$options.provide

获取实例对象的 “provide” 参数。

如果 “provide” 参数存在，则给实例对象 "vm" 添加 "_provided" 属性。

如果 “provide” 是函数，则获取该函数的返回值，否则直接赋值实例对象的 "provide"属性给 "_provided"。

vue provide

上一篇：vue3依赖注入的使用 provide，inject
下一篇：Vue3.2在script setup语法中provide和inject的使用方法

Vue源码逐行解析十一 initProvide函数(初始化Provide参数)

相关推荐

取消回复欢迎你发表评论:

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

Vue-实现自定义插件弹窗（vue 实现弹窗）

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起

如何快速切换node版本?利用n包快速切换nodejs版本

什么是幂等?分布式锁如何实现业务幂等?

如何发个 npm 包?

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

【Python机器学习系列】建立多层感知机模型预测心脏疾病

详解MySQL 字符串拼接之concat\concat_ws\group_concat

让Jenkins自动部署你的Vue项目「实践」

Vue源码逐行解析十一 initProvide函数(初始化Provide参数)

相关推荐

取消回复欢迎 你 发表评论:

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

Vue-实现自定义插件弹窗（vue 实现弹窗）

旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起

如何快速切换node版本?利用n包快速切换nodejs版本

什么是幂等?分布式锁如何实现业务幂等?

如何发个 npm 包?

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

【Python机器学习系列】建立多层感知机模型预测心脏疾病

详解MySQL 字符串拼接之concat\concat_ws\group_concat

让Jenkins自动部署你的Vue项目「实践」

取消回复欢迎你发表评论:

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起