1. 概述
暗示效應告訴我們：
巧妙的暗示會在不知不覺中剝奪我們的判斷力，對我們的思維形成一定的影響，造成我們行為的些許改變或者偏差。
例如你的朋友說你臉色不太好，是不是病了，此時，你可能就會感覺渾身不舒服、頭重腳輕，想趕緊去看醫生。
而如果你的朋友對你說你臉色不太好，應該是沒睡好，屬於正常現象，一會中午吃點好的，再睡個午覺就沒事了，你可能就會感覺只是小事情，不會去在意。
積極的暗示，是有利於身心健康的，因此我們要時刻保持正能量，多對自己做積極的暗示。
言歸正傳，今天我們來聊聊 VUE 的動態組件。
2. 動態組件
2.1 一個簡單的提交例子
<body> <div id="myDiv"></div> </body> <script> const app = Vue.createApp({ template:` <my-input /> <my-div /> <button>提交</button> ` }); app.component("my-input", { template: ` <input /> ` }); app.component("my-div", { template: ` <div> 提交成功 </div> ` }); const vm = app.mount("#myDiv");
這是一個簡單的提交例子，需要實現的效果是：“提交成功”幾個字先隱藏，我們在文本框中填寫內容，點擊提交按鈕，文本框隱藏，顯示“提交成功”幾個字，按鈕由【提交】變為【重新編輯】
當點擊【重新編輯】時，文本框顯示，“提交成功”幾個字隱藏，按鈕由【重新編輯】變為【提交】
2.2 使用 v-show 實現
咱們先使用之前學的 v-show 的語法實現上面的需求
const app = Vue.createApp({ data() { return { showCom : "my-input", buttonName : "提交" } }, methods : { changeInputStatus() { if(this.showCom === 'my-input') { this.showCom = "my-div"; this.buttonName = "重新編輯"; } else { this.showCom = "my-input"; this.buttonName = "提交"; } } }, template:` <my-input v-show="showCom === 'my-input'" /> <my-div v-show="showCom === 'my-div'" /> <button @click="changeInputStatus">{{buttonName}}</button> ` }); app.component("my-input", { template: ` <div> <input /> </div> ` }); app.component("my-div", { template: ` <div> 提交成功 </div> ` });
很明顯，用 v-show 的語法是可以實現的，我們只需修改 data 中的 showCom 的值，就能實現組件的隱藏和顯示
2.3 使用動態組件實現
const app = Vue.createApp({ data() { return { showCom : "my-input", buttonName : "提交" } }, methods : { changeInputStatus() { if(this.showCom === 'my-input') { this.showCom = "my-div"; this.buttonName = "重新編輯"; } else { this.showCom = "my-input"; this.buttonName = "提交"; } } }, template:` <component :is="showCom" /> <button @click="changeInputStatus">{{buttonName}}</button> ` });
使用 <component :is="showCom" /> 動態組件標簽，將組件與數據 showCom 綁定，showCom 的值，必須是組件的名字，名字是哪個組件，component 就轉變成哪個組件
但似乎有點問題，點擊【重新編輯】重新顯示文本框后，文本框中輸入的內容不見了，我們希望文本框中的內容還在
2.4 使用動態組件實現，保留文本框內容
const app = Vue.createApp({ data() { return { showCom : "my-input", buttonName : "提交" } }, methods : { changeInputStatus() { if(this.showCom === 'my-input') { this.showCom = "my-div"; this.buttonName = "重新編輯"; } else { this.showCom = "my-input"; this.buttonName = "提交"; } } }, template:` <keep-alive> <component :is="showCom" /> </keep-alive> <button @click="changeInputStatus">{{buttonName}}</button> ` });
在 component 標簽外面包裹一層 keep-alive 標簽，文本框的內容就可以保留了
3. 綜述
今天聊了一下 VUE3 的 動態組件的使用，希望可以對大家的工作有所幫助，下一節我們繼續講組件的相關知識，敬請期待
歡迎幫忙點贊、評論、轉發、加關注 ：）
關注追風人聊Java，每天更新Java干貨。
4. 個人公眾號
追風人聊Java，歡迎大家關注
