一，父級傳向子級
1，在子級的屬性中添加props:['myname',......]，參數可以傳多個，看具體而定；
2，在父級data中定義好需要傳遞的變量數據，例如name:"rose";
3，在父級template中的子級引用的標簽內，利用v-bind:綁定需要傳遞的數據，例如<son v-bind:myname="name" .....></son>，此時的myname對應子級props所定義的myname，而name對應父級data里的name；
4，此時，在子級中引用{{myname}}就可以得到父級所傳遞的數據："rose"。
例子如下：
1 <body> 2 <div id="app"> 3 <father></father> 4 </div> 5 <script> 6 // 創建父級組件 7 Vue.component('father', { 8 template: ` 9 <div class="box"> 10 <h3>父級組件</h3> 11 <p>我兒子的名字叫{{mysonname}}</p> 12 <son :myname="mysonname"></son> 13 </div> 14 `, 15 // 這里的data要求是函數模式,並且返回一個全新的對象 16 data() { 17 return { 18 mysonname: "Jack", 19 } 20 }, 21 // 創建子級組件 22 components: { 23 son: { 24 template: ` 25 <div> 26 <h4>子級組件</h4> 27 <p>我的名字叫{{myname}}</p> 28 </div> 29 `, 30 // props，組件之間傳遞參數的關鍵屬性,通過父級的v-bind綁定屬性傳參 31 props: ['myname', 'a', 'b'] 32 } 33 } 34 }) 35 36 var vm = new Vue({ 37 el: '#app', 38 data: { 39 40 } 41 }) 42 </script> 43 </body>
二，子級向父級傳遞參數
1，在子組件方法體利用this.$emit('emitName',this.name)把數據發送到父組件;
2，在父組件方法體中定義方法，例如getName(value){}，用於接收數據;
3，在父組件引用的子組件中寫入@emitName="getName"，例如<sonCom @emitName="getName"></conCom>，"@emitName"中的"emitName"對應子組件this.$emit()中的第一個參數'emitName'；
4，父組件調用方法getName(value){ }，value就等於子組件傳過來的this.name;
例子如下：
1 // 創建父級組件 2 Vue.component('father', { 3 template: ` 4 <div class="box"> 5 <h3>父級組件</h3> 6 <p>兒子，3 + 5 = {{answer}}</p> 7 <son @tellAns="getAns"></son> 8 </div> 9 `, 10 // 這里的data要求是函數模式,並且返回一個全新的對象 11 data() { 12 return { 13 answer: "?" 14 } 15 }, 16 methods: { 17 getAns(res) { 18 // console.log(res); 19 this.answer = res; 20 } 21 }, 22 // 定義子級組件 23 components: { 24 son: { 25 template: ` 26 <div> 27 <h4>子級組件</h4> 28 <button @click="answerQ">回答</button> 29 </div> 30 `, 31 // props，組件之間傳遞參數的關鍵屬性,通過父級的v-bind綁定屬性傳參 32 methods: { 33 answerQ() { 34 this.$emit('tellAns', 8); 35 } 36 } 37 } 38 } 39 })
三，兄弟級之間傳遞參數
1，創建事件總線let eventBus = new Vue();
2，在A方法體里調用eventBus.$emit("emitName",'jack');
3，在B方法體里接收，eventBus.$on("emiName",(value)=>{})，此時的value就等於A中傳遞過來的jack。
此方法通用，適合父級傳子級，子級傳父級，同級之間傳遞。
例子如下：
<!DOCTYPE html> <html lang="en"> <head> <title>demo</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="./vue.js"></script> </head> <body> <div id="app"> <father></father> </div> <script>
//創建事件總線對象 let eventBus = new Vue();
//創建父級組件 Vue.component('father', { template: ` <div class="father"> <son1></son1> <son2></son2> </div> `,
//創建子級組件 components: { son1: { template: ` <div> <h2>A</h2> <div>B,你叫{{bName}}</div> </div> `, data() { return { bName: "?" } }, mounted() { eventBus.$on("tellName", (value) => { this.bName = value; }) } }, son2: { template: ` <div> <h2>B</h2> <button @click="tellMyName">告訴你</button> </div> `, methods: { tellMyName() { eventBus.$emit("tellName", "jack"); } } } } }) var vm = new Vue({ el: '#app', data: { } }) </script> </body> </html>