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

                企業??AI智能體構建引擎,智能編排和調試,一鍵部署,支持知識庫和私有化部署方案 廣告
                [TOC] >[success] # Mixin 混入的基礎語法 這章講解一下 **vue** 中相關的一些 **復用性代碼** 該怎么去寫,首先介紹一下 **mixin 混入** , **mixin 混入: 就是把某一些內容混入到哪里去** 。 >[success] ## 局部混入 如下代碼,定義了一個 **myMixin** 混入,并且 **混入的代碼中** 同樣有一個名稱為 **number** 的 **變量** , **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mixin 混入的基礎語法</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 1. 定義mixin 混入 // 組件 data 優先級高于mixin data 優先級 const myMixin = { data(){ return { number: 2, count: 222 } } } const app = Vue.createApp({ data(){ return { number: 1 } }, mixins: [myMixin], // 2. 引入混入 methods: { handleClick(){ console.log('handleClick') } }, template: ` <div> <div>{{number}}</div> <div>{{count}}</div> <button @click="handleClick">增加</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ 如果 **混入的變量與文件中的變量名相同** 的情況下, 使用文件自己的 **number** 變量,如果文件中沒有 **number** 這個變量,就會使用 **混入的代碼中的 number 變量** ,代碼如下: ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mixin 混入的基礎語法</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 1. 定義mixin 混入 // 組件 data 優先級高于mixin data 優先級 const myMixin = { data(){ return { number: 2, count: 222 } } } const app = Vue.createApp({ data(){ return { // number: 1 } }, mixins: [myMixin], // 2. 引入混入 methods: { handleClick(){ console.log('handleClick') } }, template: ` <div> <div>{{number}}</div> <div>{{count}}</div> <button @click="handleClick">增加</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ **生命周期** 也是可以 **混入** 的,那么如果 **組件代碼中與混入代碼中** 都有 **created** 會怎么樣呢,代碼如下: ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mixin 混入的基礎語法</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 1. 定義mixin 混入 // 組件 data, methods 優先級高于mixin data, methods 優先級 // 生命周期函數,先執行 mixin 里面的,再執行組件里面的 const myMixin = { data(){ return { number: 2, count: 222 } }, created(){ console.log('我是混入的created') }, methods: { handleClick(){ console.log('mixin handleClick') } } } const app = Vue.createApp({ data(){ return { number: 1 } }, created(){ console.log('我是自己的created') }, mixins: [myMixin], // 2. 引入混入 methods: { handleClick(){ console.log('handleClick') } }, template: ` <div> <div>{{number}}</div> <div>{{count}}</div> <button @click="handleClick">增加</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ **生命周期函數** ,會先執行 **mixin** 里面的,再執行 **組件** 里面的 。 >[success] ## 全局混入 假如有這樣一個場景:**A組件** 中引入了 **mixin混入代碼** ,并且 **A組件** 中引入了 **B組件** ,在這個時候如果 **B組件** 想使用 **A組件** 引入的 **mixin混入代碼** , **可以直接使用嗎? 答案是不可以的** 。如果也想使用 **mixin混入的代碼**, 必須也要在 **B組件** 內引入 **mixin混入代碼** 才能使用,這就跟 **vue** 的 **局部組件** 一個道理,那么 **如何引入一次混入,任何組件都可以使用** 呢,接下來講解一下 **全局混入** 的使用方法。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mixin 混入的基礎語法</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 組件 data, methods 優先級高于mixin data, methods 優先級 // 生命周期函數,先執行 mixin 里面的,再執行組件里面的 const app = Vue.createApp({ data(){ return { number: 1 } }, created(){ console.log('我是自己的created') }, methods: { handleClick(){ console.log('handleClick') } }, template: ` <div> <div>{{number}}</div> <child /> <button @click="handleClick">增加</button> </div>` }) // 創建全局mixin app.mixin({ data(){ return { number: 2, count: 222 } }, created(){ console.log('我是混入的created') }, methods: { handleClick(){ console.log('mixin handleClick') } } }) // 創建子組件 app.component('child', { template: "<div>{{count}}</div>" }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## 自定義屬性與mixin 下面代碼中的 **number** 屬性,這種在 **實例里** 或者 **組件里** 面定義的內容,實際上是一個 **自定義屬性** ,既不在 **data** 里,也不在 **methods** 里,又不在 **計算屬性** 里,又不在 **各種各樣(例如:watch等等...)** 的方法里,直接 **定義在組件的最外層這樣的一個屬性** ,這種內容,我們把它叫做 **自定義屬性** 。 **this.$options** 指的是 當前的 **vue應用** 或 **組件**,所有的內容,在**vue** 做處理之后,都會把它掛到 **this.$options** 里面來,直接 **this.number** 是獲取不到的,用 **this.$options.number** 這種方式才可以獲取到。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mixin 混入的基礎語法</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 組件 data, methods 優先級高于mixin data, methods 優先級 // 生命周期函數,先執行 mixin 里面的,再執行組件里面的 const myMixin = { number: 1 } const app = Vue.createApp({ mixins: [myMixin], number: 2, template: ` <div> <div>{{this.$options.number}}</div> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ **組件的 自定義屬性 優先級高于 mixin 自定義屬性 優先級** >[success] ### 自定義屬性優先級修改 雖然上面說到了 **組件的 自定義屬性 優先級高于 mixin 自定義屬性 優先級** ,但是**vue** 是 **支持修改自定義屬性優先級** 的,代碼如下: **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mixin 混入的基礎語法</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 組件 data, methods 優先級高于mixin data, methods 優先級 // 生命周期函數,先執行 mixin 里面的,再執行組件里面的 const myMixin = { number: 1 } const app = Vue.createApp({ mixins: [myMixin], number: 2, template: ` <div> <div>{{this.$options.number}}</div> </div>` }) // 對自定義屬性number的合并策略做修改, app.config.optionMergeStrategies.number = (mixinVal, appVal) => { return mixinVal || appVal // mixinVal 有就用 mixinVal,否則用appVal } const vm = app.mount('#root') </script> </html> ~~~ >[success] ## 總結 1. **組件 的 data, methods 優先級高于mixin data, methods 優先級** 2. **生命周期函數,先執行 mixin 里面的,再執行組件里面的** 3. **組件的 自定義屬性 優先級高于 mixin 自定義屬性 優先級**
                  <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>

                              哎呀哎呀视频在线观看