<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>

                ??一站式輕松地調用各大LLM模型接口,支持GPT4、智譜、豆包、星火、月之暗面及文生圖、文生視頻 廣告
                [TOC] >[success] # 組件的定義及復用性,局部組件和全局組件 ![](https://img.kancloud.cn/59/f9/59f9c7516cbd2ed27137b3341b05c800_1406x544.png) 上圖,**左面** 是 **頁面** 的 **整體結構** ,我們可以把它 **拆分成 3 個部分** ,**頭部** 、 **左側部分** 、 **右側部分** ,每個部分可以**再進行拆分** , 這樣我們就會發現一個頁面可以進行 **層層拆分** ,拆成一個像 **右側** 一樣的 **樹狀結構** ,這就是 **拆分組件的思維** 。 >[success] ## 組件復用性 **組件具備共用性(復用性),每個組件的數據是獨享的,而不會跟其他組件共享** , **組件在頁面多次引用 ,它們的數據不會共享,每個組件都是獨立的** >[success] ## 全局組件 **全局組件名稱** :建議用小寫橫線連接(例如:counter-parent) 我們可以看到下面的代碼中, **counter-parent組件** 與 **counter 組件** 是兄弟級組件,那為什么在 **counter-parent組件** 中又可以引用 **counter 組件** 呢, 這是因為用 **app.component 方法定義的組件都會成為全局組件** ,在哪里都可以使用。 **缺點** : **如果定義了組件但是頁面中未引用該組件的標簽元素,這個組件會占用這個app實例化對象的存儲空間,一直掛載在這個app實例化對象上** ,所以說它對性能是有一定的損耗的,你不用它,它也在。 **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> <counter-parent /> <counter /> <counter /> <counter /> </div>` }) // 定義全局組件 app.component('counter-parent', { template: `<counter />` }) // 定義全局組件 app.component('counter', { data(){ return { count: 1 } }, template: `<div @click="count += 1">{{count}}</div>` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## 局部組件 **局部組件名稱** :建議用 **大駝峰命名(例如:Name)** **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> // 1. 創建局部組件(局部組件建議首字母大寫) const Counter = { data(){ return { count: 1 } }, template: `<div @click="count += 1">{{count}}</div>` } // 父組件 const app = Vue.createApp({ components: { // 2. 引入局部組件 // Counter: Counter // 組件名:組件值 // 簡寫: Counter }, template: ` <div> <counter /> </div>` }) 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>

                              哎呀哎呀视频在线观看