組件間雙向綁定高級內容 · vue筆記

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