關於父類元件和子類元件的互相傳值
阿新 • • 發佈：2018-12-12
第一步：子類向父類傳值
在java中父類是可以將值傳給子類的，但是卻不能從子類拿到值，同理子類是可以將父類的值拿到手，但是卻不能將自己的值傳給父類
而在vue中，子類和父類之間是不允許傳值的但是，我們可以利用關聯和引用來讓他們之間建立起一些聯絡
子類向父類傳值要使用$emit方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子類向父類傳值</title> <script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script> <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script> </head> <body> <div id="box"> <parent1></parent1> </div> <!-- 父 --> <template id="p"> <h1>{{parentmsg}}<child1 @chuandi="shouji"></child1></h1> </template> <!-- 子 --> <template id="c"> <div> <input type="text" v-model="childmsg"> <button @click="fanhui">點選就將這個input標籤的值傳遞給父類的方法，並改變父類標籤的內容</button> </div> </template> <script> let vm = new Vue({ el:"#box", data:{ msg:"ds", }, components:{ "parent1":{ template:"#p", data:function(){ return{ parentmsg:"父類的內容", } }, methods:{ shouji:function(value){ alert(value); this.parentmsg=value; } }, components:{ "child1":{ template:"#c", data:function(){ return{ childmsg:"自樂", } }, methods:{ fanhui:function(){ this.$emit("chuandi",this.childmsg); } } } } } } }) </script> </body> </html>
為了方便理解，我們就從父類開始分析他們之間的聯絡
1首先父類定義了一個用來接收子類準備返回值的方法——shouji（）該方法觸發按鈕和事件，它只是等待子類使用emit方法來觸發它
2然後我們給該方法取了個別名繫結到一個叫做@chaundi的方法名上，該不處理是在父類元件中引用子類元件的時候傳遞給子類元件的
3然後子類元件中有一個方法叫做fanhui，該方法是由button按鈕觸發的，但我們點選按鈕的時候，該方法體內部的
this.$emit("chuandi",this.childmsg);會將該子元件的childmsg傳遞給別名為chuandi的父類的shouji方法，然後父類shouji
步驟不多：一共就是父類監聽，然後取個別名傳給子元件，子元件使用emit呼叫別名，並返回值給父類監聽方法
第二步：父元件向子元件傳遞值
這種就比上一種還要簡單點
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父向子傳值</title> <script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script> <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script> </head> <body> <div id="box"> <parent1 :mess="msg"></parent1> </div> <!-- 父框架 --> <template id="p"> <h1>父類文字內容<child1 :message="mess"></child1></h1> </template> <!-- 子類文字內容 --> <template id="c"> <h1>子類文字內容{{message}}</h1> </template> <script> let vm = new Vue({ el:'#box', data:{ msg:"kn" }, components:{ "parent1":{ template:"#p", props:["mess"], data:function(){ return{ msg1:"父類傳給子類的遺產", } }, /*父類裡面嵌入子*/ components:{ "child1":{ template:"#c", props:['message'], } } } } }) </script> </body> </html>
這裡我們所做的就是將最外圍的vue的msg值傳遞到最裡層的子元件中去
我們第一步將值從vue傳遞到父元件，在div#box中引用父元件的時候，就將msg去個別名賦給：mess
然後父元件定義props：【“mess”】接收了該值，然後在父元件的template中引用子元件的標籤的時候將mess取個別名
：message=”mess“,同理子啊子元件的props：【”message“】也定義了一番，然後就可以在子元件的template中直接使用{{message}}來接收來自父元件的值了。