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 这样"白传"。

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

相关推荐
MariaH2 分钟前
深入了解vertical-align
前端
草巾冒小子16 分钟前
element-ui图片查看器
前端·vue.js·ui
光影少年33 分钟前
vue3为什么不需要时间切片
前端·vue.js
Json_35 分钟前
Vue 初识Hello word
前端·vue.js·深度学习
工藤孤独36 分钟前
网页字体终极指南:从选择到优化加载体验
前端·css
一枚前端小姐姐39 分钟前
git merge - 本地解决无权限dev分支的合并冲突
前端·git
Shi_haoliu40 分钟前
各种网址整理-vue,前端,linux,ai前端开发,各种开发能用到的网址和一些有用的博客
linux·前端·javascript·vue.js·nginx·前端框架·pdf
东望44 分钟前
从基础用法到源码实现:手写 Promise 的完整指南
javascript·promise
喝奶茶不加糖1 小时前
什么是promise
前端·javascript