🚀 Vue 2 探秘：visible 和 append-to-body 是誰的小秘密？🤔
- 父組件：identify-list.vue
- 子組件：fake-clue-list.vue
嘿，各位前端探險家！👋 今天我們要在 Vue 2 的代碼叢林里挖寶，目標是兩個神秘屬性：visible 和 append-to-body。它們藏在組件里，像遙控器一樣控制對話框的開關和位置。到底是誰定義了它們？它們有啥用？咱們帶上放大鏡 🔍，一起揭秘吧！?
🌟 背景：從一個對話框開始
假設你有一個 Vue 2 項目，用的是 Element UI 的 <el-dialog>。代碼長這樣：
<!-- 父組件 -->
<template><el-dialog :visible="visible" title="識別點"><fake-clue-list :visible.sync="fclVis" @close="onfclClose" /></el-dialog>
</template>
<!-- fake-clue-list.vue 子組件 -->
<template><el-dialog :visible="visible" :append-to-body="true" title="假貨線索"><!-- 內容 --></el-dialog>
</template>
點擊按鈕，子組件的對話框蹦出來，但你突然好奇：visible 和 append-to-body 到底是誰定義的？是自己寫的，還是框架給的？別急，咱們一步步解剖！🧑?🔬
🎬 第一幕：visible 的身世之謎
它從哪來？
在父組件中，我們看到 <fake-clue-list :visible.sync="fclVis" />，子組件里是 <el-dialog :visible="visible">。這倆 visible 啥關系？
子組件的定義
打開 fake-clue-list.vue，發現：
export default class extends Vue {@Prop({ default: false }) private visible!: boolean
}
@Prop：visible是子組件用 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：
// @Prop({ default: false }) private visible!: boolean
結果？控制臺炸了：
[Vue warn]: Property or method "visible" is not defined on the instance but referenced during render.
對話框也不彈了！這證明：
visible是FakeClueList自己聲明的 prop。- 沒有它，父組件的
:visible.sync無處對接，<el-dialog>也懵了。😵
流程圖：visible 的旅程
用 Mermaid 圖展示一下：
🎭 第二幕：append-to-body 的多余冒險
父組件的“熱情”
父組件原本是這樣的：
<fake-clue-list :visible.sync="fclVis" :append-to-body="true" @close="onfclClose" />
:append-to-body="true" 看起來像是要控制啥，但子組件里呢？
子組件的真相
<el-dialog :visible="visible" :append-to-body="true">
- 硬編碼：子組件直接寫死了
:append-to-body="true"。 - Prop 檢查：腳本中沒有：
也就是說，@Prop() private appendToBody!: booleanFakeClueList根本沒定義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 刪了：
<fake-clue-list :visible.sync="fclVis" @close="onfclClose" />
結果？對話框照樣彈出，DOM 依然掛在 <body> 下。為啥？因為子組件的 <el-dialog :append-to-body="true"> 已經全權負責！
🧠 思維導圖總結
用 Mermaid 畫個思維導圖，理清關系：
🎉 結論與收獲
-
visible：- 誰定義的：你在
FakeClueList中用@Prop聲明。 - 來源：沿用 Element UI 的
<el-dialog>的visible。 - 重要性：沒它，對話框開關失靈！
- 誰定義的：你在
-
append-to-body：- 誰定義的：Element UI，在
<el-dialog>中提供。 - 你的用法：子組件寫死
true，父組件的傳值多余。 - 清理：刪掉父組件的
:append-to-body，代碼更清爽。
- 誰定義的：Element UI，在
小Tips
- 想動態控制
append-to-body？在子組件加個@Prop，別寫死。 - 檢查 prop 用沒用到，省得像
:append-to-body這樣“白傳”。
這次探秘是不是很有趣？😎 下次遇到神秘屬性，別忘了帶上實驗精神，一探到底！有啥想法，評論區聊聊吧！👇
![git | 回退版本 并保存當前修改到stash，在進行整合。[git checkout | git stash 等方法 ]](http://pic.xiahunao.cn/git | 回退版本 并保存當前修改到stash，在進行整合。[git checkout | git stash 等方法 ])
)
