Vue 2 探秘:visible 和 append-to-body 是谁的小秘密?

🚀 Vue 2 探秘:visibleappend-to-body 是谁的小秘密?🤔

  • 父组件:identify-list.vue
  • 子组件:fake-clue-list.vue

嘿,各位前端探险家!👋 今天我们要在 Vue 2 的代码丛林里挖宝,目标是两个神秘属性:visibleappend-to-body。它们藏在组件里,像遥控器一样控制对话框的开关和位置。到底是谁定义了它们?它们有啥用?咱们带上放大镜 🔍,一起揭秘吧!✨


🌟 背景:从一个对话框开始

假设你有一个 Vue 2 项目,用的是 Element UI 的 <el-dialog>。代码长这样:

html 复制代码
<!-- 父组件 -->
<template>
  <el-dialog :visible="visible" title="识别点">
    <fake-clue-list :visible.sync="fclVis" @close="onfclClose" />
  </el-dialog>
</template>
html 复制代码
<!-- fake-clue-list.vue 子组件 -->
<template>
  <el-dialog :visible="visible" :append-to-body="true" title="假货线索">
    <!-- 内容 -->
  </el-dialog>
</template>

点击按钮,子组件的对话框蹦出来,但你突然好奇:visibleappend-to-body 到底是谁定义的?是自己写的,还是框架给的?别急,咱们一步步解剖!🧑‍🔬


🎬 第一幕:visible 的身世之谜

它从哪来?

在父组件中,我们看到 <fake-clue-list :visible.sync="fclVis" />,子组件里是 <el-dialog :visible="visible">。这俩 visible 啥关系?

子组件的定义

打开 fake-clue-list.vue,发现:

typescript 复制代码
export default class extends Vue {
  @Prop({ default: false }) private visible!: boolean
}
  • @Propvisible 是子组件用 TypeScript 的 @Prop 装饰器定义的一个 prop,默认值是 false
  • 作用 :接收父组件传来的值(fclVis),然后绑定到 <el-dialog>:visible
Element UI 的影子

但等等!<el-dialog>visible 可不是随便起的名字。根据 Element UI 文档:

  • 属性visible
  • 类型Boolean
  • 作用:控制对话框显示与隐藏。

子组件的 visible prop 直接传给了 <el-dialog>,这说明:

  • 直接定义者 :是你(或子组件作者),在 FakeClueList 中用 @Prop 声明。
  • 根本来源 :Element UI 的 <el-dialog>,它定义了 visible 这个 prop,子组件只是"借用"并传递。

实验验证

为了确认,我试着注释掉 @Prop

typescript 复制代码
// @Prop({ default: false }) private visible!: boolean

结果?控制台炸了:

json 复制代码
[Vue warn]: Property or method "visible" is not defined on the instance but referenced during render.

对话框也不弹了!这证明:

  • visibleFakeClueList 自己声明的 prop。
  • 没有它,父组件的 :visible.sync 无处对接,<el-dialog> 也懵了。😵

流程图:visible 的旅程

用 Mermaid 图展示一下:
传递Prop 属性绑定 控制显示 用户操作 事件传递 状态同步 父组件状态: fclVis FakeClueList组件 el-dialog组件 对话框显示 关闭对话框 更新状态: $emit


🎭 第二幕:append-to-body 的多余冒险

父组件的"热情"

父组件原本是这样的:

html 复制代码
<fake-clue-list :visible.sync="fclVis" :append-to-body="true" @close="onfclClose" />

:append-to-body="true" 看起来像是要控制啥,但子组件里呢?

子组件的真相
html 复制代码
<el-dialog :visible="visible" :append-to-body="true">
  • 硬编码 :子组件直接写死了 :append-to-body="true"

  • Prop 检查 :脚本中没有:

    typescript 复制代码
    @Prop() private appendToBody!: boolean

    也就是说,FakeClueList 根本没定义 append-to-body 作为 prop!

Element UI 的定义

再看 Element UI 文档:

  • 属性append-to-body
  • 类型Boolean
  • 默认值false
  • 作用 :决定对话框 DOM 是否追加到 <body>

子组件的 :append-to-body="true" 是给 <el-dialog> 用的,但父组件的 :append-to-body 呢?因为没被子组件接收,它只是个"空气传值",啥也没干。😂

删除实验

我把父组件的 :append-to-body 删了:

html 复制代码
<fake-clue-list :visible.sync="fclVis" @close="onfclClose" />

结果?对话框照样弹出,DOM 依然挂在 <body> 下。为啥?因为子组件的 <el-dialog :append-to-body="true"> 已经全权负责!


🧠 思维导图总结

用 Mermaid 画个思维导图,理清关系:
Vue 2 属性探秘 visible append-to-body 定义者: FakeClueList @Prop 声明 来源: Element UI 的 visible 作用: 控制显示 定义者: Element UI 的 append-to-body 父组件传值: 无用 子组件: 写死 true 作用: DOM 追加到 body


🎉 结论与收获

  1. visible

    • 谁定义的 :你在 FakeClueList 中用 @Prop 声明。
    • 来源 :沿用 Element UI 的 <el-dialog>visible
    • 重要性:没它,对话框开关失灵!
  2. append-to-body

    • 谁定义的 :Element UI,在 <el-dialog> 中提供。
    • 你的用法 :子组件写死 true,父组件的传值多余。
    • 清理 :删掉父组件的 :append-to-body,代码更清爽。

小Tips

  • 想动态控制 append-to-body?在子组件加个 @Prop,别写死。
  • 检查 prop 用没用到,省得像 :append-to-body 这样"白传"。

这次探秘是不是很有趣?😎 下次遇到神秘属性,别忘了带上实验精神,一探到底!有啥想法,评论区聊聊吧!👇

相关推荐
天天扭码4 分钟前
前端进阶 | 面试必考—— JavaScript手写定时器
前端·javascript·面试
梦雨生生20 分钟前
拖拉拽效果加点击事件
前端·javascript·css
前端Hardy22 分钟前
HTML&CSS:全网最全的代码时钟效果
javascript·css·html
前端Hardy27 分钟前
HTML&CSS:看这里,动态背景卡片效果
javascript·css·html
前端Hardy27 分钟前
第2课:变量与数据类型——JS的“记忆盒子”
前端·javascript
前端Hardy29 分钟前
第1课:初识JavaScript——让你的网页“动”起来!
javascript
冴羽43 分钟前
SvelteKit 最新中文文档教程(23)—— CLI 使用指南
前端·javascript·svelte
jstart千语1 小时前
【SpringBoot】HttpServletRequest获取使用及失效问题(包含@Async异步执行方案)
java·前端·spring boot·后端·spring
徐小夕1 小时前
花了2个月时间,写了一款3D可视化编辑器3D-Tony
前端·javascript·react.js
凕雨1 小时前
Cesium学习笔记——dem/tif地形的分块与加载
前端·javascript·笔记·学习·arcgis·vue