vue $attrs vue2

小探vue2中的$attrs是如何生成的

由 漆黑菌 于 2023年10月12日 发布

缘起

vue2中传递给组件的props，如果不在子组件的props设置中，会被添加到子组件的$attrs

过程

<template>
  <HelloWorld :test123="'test233'" :test233="'1234'" v-bind="{ test233: '123' }" />
</template>

template在2.6.14中会被转换成

var render = function () {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c(
    "HelloWorld",
    _vm._b(
      { attrs: { test123: "test233", test233: "1234" } },
      "HelloWorld",
      { test233: "123" },
      false
    )
  )
}
var staticRenderFns = []
render._withStripped = true

export { render, staticRenderFns }

查询文档_b实际上是bindObjectProps，会把动态添加的{ test233: “123” }合并入attrs: { test123: “test233”, test233: “1234” } （仅仅是当前情况，也有其他合并方式，可见详情可见hash[key] = value[key]）。_c会执行到rander => _createElement => createComponent

在createComponent过程中通过extractPropsFromVNodeData(data, Ctor, tag)方法，提取真实的props。并且把attrs中的key存在于props配置的删掉。

代码位置

extractPropsFromVNodeData

CATALOG
    FEATURED TAGS
    helloworld Linux 记录生活 微信 JavaScript tomcat 开机启动 免费CDN VPS nginx 科学使用 网络工程 代理 vue webpack css 面试总结 npm 移动端 docker Windows checkbox vue-cli monaco-editor vue3 vue2 qiankun vue2.6 vue2.7 vue $slots vue $scopedSlots
    FRIENDS