實現功能：
1、子組件的input輸入，改變父組件信息
2、父組件對子組件1，3進行監聽與控制
3、子組件1與子組件3相互關聯
父子雙向通信流程：
子組件的input通過事件監聽->控制子組件的data中變量/向父組件$emit子事件及變量
父組件監聽到$emit事件及變量，賦予父組件的變量，通過props傳到子組件
<body><div id = "app"> <!-- //將父組件num1的數據傳給props中的pnumber1,實現父傳子 //監聽子組件num1change事件，這里recdnum1函數，沒明白加括號出錯 --><cnp :pnumber1 = "num1" :pnumber3 = "num3" @num1change = "recdnum1" @num3change="recdnum3" ></cnp></div> <!-- //template 編寫自己的模版 --><template id = "mytemp"> <div> <h3>props:{{pnumber1}}</h3> <h3>child-data:{{dnumber1}}</h3> <h3></h3> <input type="text" :value="dnumber1" @input="num1input"> <h3>props:{{pnumber3}}</h3> <h3>child-data:{{dnumber3}}</h3> <input type="text" :value="dnumber3" @input="num3input"> </div></template><script>var app = new Vue({ el:"#app", data(){ return{ //父組件數據庫中的默認數值 num1:11, num3:31, } }, methods:{ //監聽事件中，將子組件傳來的dnumber1傳給num1，num1傳給pnumber1 recdnum1(value){ //默認傳遞來的value為String，根據需要轉為Int或Float this.num1 = parseInt(value); }, recdnum3(value){ this.num3=parseFloat(value); } }, components: { cnp:{ template:"#mytemp", props: { pnumber1:{ //默認props的數據格式和默認值 type:Number, default:1 }, pnumber3:{ type:Number, default:3 } }, data(){ return{ //將props的數值賦予data中變量 dnumber1:this.pnumber1, dnumber3:this.pnumber3 } }, methods: { num1input(event){ //將input中的數值傳給dnumber1 this.dnumber1 = event.target.value; //向父組件發射事件num1change,并傳出dnumber1數據 this.$emit("num1change",this.dnumber1); //綁定pnumber3數值的關聯性 this.dnumber3=this.dnumber1*5; //向父組件發射pnumber3信息 this.$emit("num3change",this.dnumber3); }, num3input(event){ this.dnumber3 = event.target.value; this.$emit("num3change",this.dnumber3) }, } } }});</script></body>以上就是相關的實例代碼，希望錯新站長站整理的內容能夠幫助到大家。
新聞熱點
疑難解答
圖片精選
