關於父類元件與子類元件的互相傳值
阿新 • • 發佈：2018-11-10
第一步：子類向父類傳值
在java中父類是可以將值傳給子類的，但是卻不能從子類拿到值，同理子類是可以將父類的值拿到手，但是卻不能將自己的值傳給父類
而在vue中，子類和父類之間是不允許傳值的但是，我們可以利用關聯和引用來讓他們之間建立起一些聯絡
子類向父類傳值要使用$emit方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script> </head> <body> <!-- 子傳父：逆傳值 --> <div id="box"> <parent></parent> </div> <template id="tt1"> <div> <child @rrt="fn2()"></child> </div> </template> <template id="dd1"> <div> <img src="images/6.png"> <span>首頁</span> <span @click="fn1()">{{msg}}</span> </div> </template> <script> var vm=new Vue({ el:"#box", data:{}, components:{ "parent":{ template:"#tt1", methods:{ fn2:function(){ console.log("dfghj") } }, components:{ "child":{ template:"#dd1", data:function(){ return{ msg:"你好" } }, methods:{ fn1:function(){ this.$emit("rrt") } } } } } } }) </script> </body> </html>
為了方便理解，我們就從父類開始分析他們之間的聯絡
1首先父類定義了一個用來接收子類準備返回值的方法——fn2（）該方法觸發按鈕和事件，它只是等待子類使用emit方法來觸發它
2然後我們給該方法取了個別名繫結到一個叫做@rrt的方法名上，該不處理是在父類元件中引用子類元件的時候傳遞給子類元件的
3然後子類元件中有一個方法叫做fn1()，該方法是由button按鈕觸發的，但我們點選按鈕的時候，該方法體內部的
this.$emit("rrt")會繫結父類fn2()方法，通過點選“你好”，打印出dfghj
步驟不多：一共就是父類監聽，然後取個別名傳給子元件，子元件使用emit呼叫別名，並返回值給父類監聽方法
第二步：父元件向子元件傳遞值
這種就比上一種還要簡單點
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script> </head> <body> <!-- 父傳子 --> <div id="box"> <parent v-bind:mess="msg"> </parent> </div> <template id="tt2"> <div> <h1 v-bind:message="mess">父類文字內容{{mess}}<child></child></h1> </div> </template> <template id="dd2"> <h2>子類文字內容{{message}}</h2> </template> <script> var vm=new Vue({ el:"#box", data:{ msg:"仙劍奇俠傳" }, components:{ "parent":{ template:"#tt2", props:["mess"], components:{ "child":{ /*props與template或el同一地位*/ template:"#dd2", props:["message"], } } } } }) </script> </body> </html>
這裡我們所做的就是將最外圍的vue的msg值傳遞到最裡層的子元件中去
我們第一步將值從vue傳遞到父元件，在div#box中引用父元件的時候，就將msg去個別名賦給：mess
然後父元件定義props：【“mess”】接收了該值，然後在父元件的template中引用子元件的標籤的時候將mess取個別名
：message=”mess“,同理子啊子元件的props：【”message“】也定義了一番，然後就可以在子元件的template中直接使用{{message}}來接收來自父元件的值了。