<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ThinkChat2.0新版上線,更智能更精彩,支持會話、畫圖、視頻、閱讀、搜索等,送10W Token,即刻開啟你的AI之旅 廣告
                [TOC] >[success] # 動態組件和異步組件 本章講解 **動態組件** 與 **異步組件** 的使用方法 >[success] ## 動態組件 **動態組件** : **根據數據的變化,結合?component?這和標簽,來隨時動態切換組件的顯示** 。 **需求** :有兩個組件,一個 **input框** ,一個 **hello world** 文字,想實現效果: **input框 顯示時, hello world 文字就隱藏, hello world 文字顯示時, input框 就隱藏** 。 如果用 **簡單寫法** 就是像下面這樣寫: **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>動態組件和異步組件</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 父組件 const app = Vue.createApp({ data(){ return { currentItem: 'input-item' } }, methods: { handleClick(){ if(this.currentItem === 'input-item'){ this.currentItem = 'common-item' } else { this.currentItem = 'input-item' } } }, template: ` <input-item v-show="currentItem === 'input-item'" /> <common-item v-show="currentItem === 'common-item'" /> <button @click="handleClick">切換</button> ` }) // 子組件 app.component('input-item', { template: `<input />` }) // 子組件 app.component('common-item', { template: `<div>hello world</div>` }) const vm = app.mount('#root') </script> </html> ~~~ 上面的代碼看似簡單,但是代碼量大,下面再看一下用 **動態組件** 實現的相同效果, **動態組件實際上就是一個 component 標簽,通過is屬性來決定這個顯示的是哪個組件** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>動態組件和異步組件</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 父組件 const app = Vue.createApp({ data(){ return { currentItem: 'input-item' } }, methods: { handleClick(){ if(this.currentItem === 'input-item'){ this.currentItem = 'common-item' } else { this.currentItem = 'input-item' } } }, template: ` <component :is="currentItem" /> <button @click="handleClick">切換</button> ` }) // 子組件 app.component('input-item', { template: `<input />` }) // 子組件 app.component('common-item', { template: `<div>hello world</div>` }) const vm = app.mount('#root') </script> </html> ~~~ 這樣就會有一個問題,在 **輸入框輸入內容后,** 點擊 **切換按鈕2次** ,又 **回到顯示輸入框的狀態下,發現輸入框內輸入的內容消失了** , 這時候就需要用到**keep-alive標簽** 來解決這個問題, **keep-alive** 的意思就是 **當這個動態組件第一次渲染時,它會把它里面的一些狀態,后面變更的一些情況,都記錄下來,當你回頭再用這個組件時,會從緩存里,把之前的數據拿過來填充上** ,代碼如下: ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>動態組件和異步組件</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 父組件 const app = Vue.createApp({ data(){ return { currentItem: 'input-item' } }, methods: { handleClick(){ if(this.currentItem === 'input-item'){ this.currentItem = 'common-item' } else { this.currentItem = 'input-item' } } }, template: ` <keep-alive> <component :is="currentItem" /> </keep-alive> <button @click="handleClick">切換</button> ` }) // 子組件 app.component('input-item', { template: `<input />` }) // 子組件 app.component('common-item', { template: `<div>hello world</div>` }) const vm = app.mount('#root') </script> </html> ~~~ **動態組件** 與 **keep-alive** 有時候會一起使用,這點注意一下即可。 >[success] ## 異步組件 1. **同步組件** 首先展示一下 **同步組件**, **同步組件** 就是你 **調用這個組件時,這個代碼就會立即執行** ,這就叫做 **同步組件**。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>同步組件</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 父組件 const app = Vue.createApp({ template: ` <div> <common-item /> </div> ` }) // 子組件 app.component('common-item', { template: `<div>hello world</div>` }) const vm = app.mount('#root') </script> </html> ~~~ 2. **異步組件** **異步組件** : **動態加載** 一些組件,這樣的好處是,我們可以把一些大型的項目,加一些小的 **js文件**,在需要用到這些小 **js文件** 的時候,通過 **異步組件** 來引入這些 **js文件** 來使用這些 **js文件** 。 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>同步組件</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 父組件 const app = Vue.createApp({ template: ` <div> <common-item /> <async-common-item /> </div> ` }) // 子組件 app.component('common-item', { template: `<div>hello world</div>` }) // 異步子組件 app.component('async-common-item', Vue.defineAsyncComponent(() => { return new Promise((reslve, reject) => { setInterval(() => { reslve({ template: `<div>這是異步組件</div>` }) }, 4000) }) })) const vm = app.mount('#root') </script> </html> ~~~
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看