怎樣使用父元件向子元件傳值【 必看】
阿新 • • 發佈：2018-12-10
呃呃，首先小仙女初學Vue傳值的時候，是費盡了腦汁，不知道怎麼回事。終於，功夫不負有心人，把他弄明白了，如有錯誤，請多指教！！
首先在學習Vue的框架開發的專案過程中，會經常會用到元件來管理不同的功能，有些公共的東西會就會被抽取出來，當做元件去使用。
這時必然會產生一些疑問和需求？比如一個元件呼叫另一個元件作為自己的子元件，那麼我們如何進行給子元件進行傳值呢？就先和小編一起探究一下吧！
父向子傳遞props
Vue.component("introduce",{ // 直接使用props接收到的屬性來渲染頁面 template:'<h3>{{title}}</h3>', props:['title'] // 通過props來接收一個父元件傳遞的屬性 })
- 這個子元件中要使用title屬性渲染頁面，但是自己並沒有title屬性
- 通過props來接收父元件屬性，名為title
父元件使用子元件，同時傳遞title屬性：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父向子傳遞</title> <script src="../vue-2.5.17.js"></script> </head> <body> <div id="app"> <input type="text" v-model="myname"> <counter :name="myname" ></counter> </div> <script> Vue.component("counter",{ template:`<h1>我喜歡的明星是 ：{{name}}</h1>`, props:['name'] //引號中名字就是變數，這種定義，就表示從父元件獲取值，呼叫元件的時候，以屬性的方式將值傳遞進來 }) var vm=new Vue({ el:"#app", data:{ myname:"", } }) </script> </body> </html>
效果如下：
傳遞複雜資料
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父向子傳值</title> <script src="../vue-2.5.17.js"></script> </head> <body> <div id="app"> <mylist :lessions="lessions"></mylist> </div> <script> Vue.component("mylist",{ template:`<ul> <li v-for="lession in lessions">{{lession.id}} - {{lession.name}}</li> </ul>`, props:['lessions'] }) var vm = new Vue({ el:"#app", data:{ lessions:[{id:1,name:"java"}, {id:2,name:"mysql"}, {id:3,name:"servlet"}, {id:4,name:"mybatis"} ] } }); </script> </body> </html>
效果圖：
好了，父元件向子元件傳值，就是這麼 easy ！ 你 學會了嗎？ 如果還不會，彆著急，一張圖絕對搞定
看好了！！！！！！！！！！！！！！！
哎呀呀，好了，以上內容就是父元件向子元件傳值！！！！！！