VUE3 之 動態元件 - 這個系列的教程通俗易懂，適合新手

追風人聊Java發表於2022-02-11
Vue元件

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，歡迎大家關注

相關文章