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

                ??碼云GVP開源項目 12k star Uniapp+ElementUI 功能強大 支持多語言、二開方便! 廣告
                [TOC] >[success] # 組件間雙向綁定高級內容 v-model的使用同時也可以參考我的另一篇文章中的 [v-model和.sync的用法](http://www.hmoore.net/wangjiachong/vue_notes/1971967#vmodelsync_304) 1. **v-model(修改單個值)**:**v-model綁值,達到子組件可以修改父組件的值的效果** 2. **v-model(修改多個值)**:**可以綁定多個v-model值,達到修改多個值** >[success] ## v-model(修改單個值) 上一章講了講了如果想做到 **子組件想修改父組件的值,子組件要通過$emit觸發父組件的自定義方法,然后在父組件中修改值** 。其實 **v-model** 同樣可以做到 **子組件修改父組件傳遞的數據**,寫法如下: **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 { count: 1 } }, template: ` <counter v-model="count" /> ` }) // 子組件 app.component('counter', { props: ['modelValue'], methods: { handleClick(){ this.$emit('update:modelValue', this.modelValue + 2) } }, template: ` <div @click="handleClick">{{modelValue}}</div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 上面代碼 **子組件** 中的 **modelValue** 是 **固定寫法** ,如果你不想叫做 **modelValue** ,你可以 **自定義名稱** ,這樣寫: ~~~ <!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 { count: 1 } }, template: ` <counter v-model:app="count" /> ` }) // 子組件 app.component('counter', { props: ['app'], methods: { handleClick(){ this.$emit('update:app', this.app + 2) } }, template: ` <div @click="handleClick">{{app}}</div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 這樣寫綁定**v-model** 的地方必須要這樣寫:**<counter v-model:app="count" /\>** ,拼接成:**v-model:組件中props自定義的名稱** >[success] ## v-model(修改多個值) 上面的 **v-model** 例子,看著是簡單了很多,但是 **只能修改單個屬性值** ,那我如果想用 **v-model修改多個屬性值** 該怎么辦呢, 代碼如下: **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 { count: 1, count1: 1 } }, template: ` <counter v-model:count="count" v-model:count1="count1" /> ` }) // 子組件 app.component('counter', { props: ['count', 'count1'], methods: { handleClick(){ this.$emit('update:count', this.count + 2) }, handleClick1(){ this.$emit('update:count1', this.count1 + 2) } }, template: ` <div @click="handleClick">{{count}}</div> <div @click="handleClick1">{{count1}}</div> ` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## 組件的v-model配合自定義的修飾符使用 在組件的 **v-model** 上,還可以 **自定義修飾符** 來使用,只需要 **在子組件中判斷父組件傳入的修飾符是什么,然后執行響應的邏輯來處理v-model綁定的值即可** ,像下面例子中,傳入了一個 **自定義大寫修飾符** ,代碼如下: 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 { count: 'a' } }, template: ` <counter v-model.uppercase="count" /> ` }) // 子組件 app.component('counter', { props: { 'modelValue': String, modelModifiers: { // modelModifiers指傳遞過來的修飾符 default: () => ({}) } }, // mounted(){ // // 打印傳過來的修飾符 // console.log(this.modelModifiers) // uppercase:true // }, methods: { handleClick(){ let newValue = this.modelValue + 'b' if(this.modelModifiers.uppercase){ // 是否使用了uppercase(全部大寫)修飾符 newValue = newValue.toUpperCase() } this.$emit('update:modelValue', newValue) } }, template: ` <div @click="handleClick">{{modelValue}}</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>

                              哎呀哎呀视频在线观看