首頁 > 開發者 > JavaScript
vue組件間通訊子與父詳解（二），vue組件通訊詳解
接著vue組件父與子通訊詳解繼續學習。
二、組件間通訊（子組件傳值給父組件）
通過事件的方式來完成資料的傳輸。
①在父組件中 定義一個方法，用來接收子組件所通過事件傳來的值
methods:{ recvMsg:function(msg){ //參數msg就是子組件通過事件出來的資料 }}
②綁定事件處理函數
事件一般情況 都是自訂事件
<child-component @myEvent="recvMsg"></child-component>
③在子組件觸發事件
事件名，值this.$emit('myEvent',myPhone)//觸發一個叫做myEvent的事件，同時把第二個參數資料傳遞給事件對應的處理函數
總結：
在Vue 中，父子組件的關係可以總結為 props down, events up。父組件通過 props 向下傳遞資料給子組件，子組件通過 events 給父組件發送訊息。
<!doctype html><html> <head> <meta charset="UTF-8"> <title>組件間通訊子傳父</title> <script src="js/vue.js"></script> </head> <body> <div id="container"> <p>{{msg}}</p> <parent-component></parent-component> </div> <script> //通過事件的方式傳遞 // 綁定 -- 觸發 Vue.component("parent-component",{ data:function(){ return { sonMsg:"" } }, methods:{ //msg參數要拿子傳遞的值 recvMsg:function(msg){ console.log("父組件接收到子組件的資料"+msg); this.sonMsg = msg; } }, template:` <div> <h1>這是父組件</h1> <p>子組件傳來的資料為：{{sonMsg}}</p> <hr/> <child-component @customEvent="recvMsg"></child-component> </div> ` }) Vue.component("child-component",{ methods:{ sendMsg:function(){ //來觸發綁定給子組件的自訂方法 //this.$emit("customEvent");第一個參數觸發 //this.$emit("customEvent");第二個參數傳值 this.$emit("customEvent","哈哈哈哈"); }, }, template:` <div> <h1>這是子組件</h1> <button @click="sendMsg">senToFather</button> </div> ` }) new Vue({ el:"#container", data:{ msg:"Hello VueJs" } }) </script> </body></html>
在子組件中放上一個input，點擊按鈕 把使用者輸入的內容發給父組件
<!doctype html><html> <head> <meta charset="UTF-8"> <title>子與父之間的通訊</title> <script src="js/vue.js"></script> </head> <body> <div id="container"> <p>{{msg}}</p> <parent-component></parent-component> </div> <script> //建立父組件 Vue.component("parent-component",{ //data屬性 data:function(){ return{ sonMsg:"" } }, methods:{ recvMsg:function(msg){ this.sonMsg = msg } }, template:` <div> <h1>父組件</h1> <h4>子組件傳遞的資料：{{sonMsg}}</h4> <child-component @customEvent="recvMsg"></child-component> </div> ` }) //建立子組件 Vue.component("child-component",{ data:function(){ return { myInput:"" } }, methods:{ sendMsg:function(){ this.$emit("customEvent",this.myInput); } }, template:` <div> <h1>子組件</h1> <input type="text" v-model="myInput"/> <button @click="sendMsg">發送</button> </div> ` }) new Vue({ el:"#container", data:{ msg:"Hello VueJs" } }) </script> </body></html>
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
