Vue元件通訊(父子元件通訊)-學習筆記
本篇筆記摘錄視訊
需求：實現父子元件通訊，由父元件傳遞num值給子元件，子元件的文字編輯框能修改其值並將資料傳遞給父元件，傳遞父元件的值要求：props2為props1的100倍。
實現效果：
邏輯分析：
解決方法：
1.定義父元件data，例項中建立num1和num2。將屬性傳遞給子元件的number1和number2。
2.在子元件裡增加input1和input2，需要將input與某一個屬性進行雙向繫結，直接進行繫結後（瀏覽器控制檯報錯，err：不推薦這樣繫結）。
3.我們建立一個data函式，在data函式中把number1賦值dnumber1進行初始化（同理dnumber2初始化）。
4.當用戶在input輸入框進行輸入時，dnumber也同時改變（雙向繫結），但是number不會改變。為什麼呢？因為子元件的data函式是對props進行初始化的，而不是props對子元件的data函式進行初始化，props是對父元件傳遞過來的data進行初始化，所以修改文字框的值不會對父元件有任何變化。看需求分析：是需要子元件的data函式改變，父元件的data也進行改變。怎麼改呢?必須監聽子元件的data函式改變，在使用者進行輸入時會呼叫一個方法，@input，監聽這個方法，不再通過v-model直接繫結，這裡又要使用methods來處理函式，定義num1input和num2input函式來繫結@input。
5.下面就要對num1input、num2input這兩個函式進行具體的實現。手動將dnumber1重新賦值，再對父元件進行改變，父元件改變必須傳送事件(子傳父)，this.$emit('num1change', this.dnumber1)傳遞出去。然後就可以在父元件裡監聽num1Input事件，在反過來修改父元件data的屬性值this.num1 = parseFloat(value)。
6.最後再滿足父元件的要求，num2是num1的100倍，num1是num2的百分之一。
程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- 中間沒有內容可以使用單標籤--> <cpn :number1="num1" :number2="num2" @num1change="num1change" @num2change="num2change"/> </div> <template id="cpn"> <div> <h2>props:{{number1}}</h2> <h2>data:{{dnumber1}}</h2> <!-- <input type="text" v-model="dnumber1">--> <input type="text" :value="dnumber1" @input="num1Input"> <h2>props:{{number2}}</h2> <h2>data:{{dnumber2}}</h2> <!-- <input type="text" v-model="dnumber2">--> <input type="text" :value="dnumber2" @input="num2Input"> </div> </template> <script src="../js/vue.js"></script> <script> const app = new Vue({ el:'#app', data:{ num1:1, num2:0 }, methods:{ num1change(value){ value = parseInt(value) this.num1 = value }, num2change(value) { value = parseInt(value) this.num2 = value } }, components:{ cpn:{ template:'#cpn', // 推薦使用物件,因為物件可以對必傳值進行限制 props:{ number1:Number, number2:Number }, data() { return { dnumber1:this.number1, dnumber2:this.number2 } }, methods:{ num1Input(event){ // 1.將input中的value賦值到dnumber中 this.dnumber1 = event.target.value; // 2.為了讓父元件可以修改值，發出一個事件 this.$emit('num1change',this.dnumber1); // 3.同時修飾dnumber2的值 this.dnumber2 = this.dnumber1 * 100 this.$emit('num2change',this.dnumber2); }, num2Input(event){ this.dnumber2 = event.target.value; this.$emit('num2change',this.dnumber2); // 同時修飾dnumber1的值 this.dnumber1 = this.dnumber2 / 100 this.$emit('num1change',this.dnumber1); } } } } }) </script> </body> </html>