溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關Vue父子傳遞的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
實現功能：
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> <h4>props:{{pnumber1}}</h4> <h4>child-data:{{dnumber1}}</h4> <h4></h4> <input type="text" :value="dnumber1" @input="num1input"> <h4>props:{{pnumber3}}</h4> <h4>child-data:{{dnumber3}}</h4> <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>
關于“Vue父子傳遞的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
