Vue的一個(gè)核心概念是組件化外臂，組件化就是把整個(gè)頁(yè)面分成不同的組件來(lái)進(jìn)行管理，分成了不同的組件就會(huì)出現(xiàn)不同的組件之間進(jìn)行傳值的問(wèn)題÷烧停現(xiàn)在介紹一種利用vue的props來(lái)實(shí)現(xiàn)父子組件的傳值宋光。
首先實(shí)現(xiàn)父組件給子組件傳值
代碼如下父組件
子組件
第一種，父組件給子組件傳值的情況
直接加上屬性名goodlist,前面用v-bind表示的是動(dòng)態(tài)傳值炭菌，如果想要傳靜態(tài)的值跃须，去掉v-bind就可以了。
這樣傳了值以后娃兽，在子組件中接收的方式為用props對(duì)象，用屬性名作為key,對(duì)象值為對(duì)這個(gè)傳的值進(jìn)行的一些限制尽楔，如傳的值類型投储，還可以對(duì)其進(jìn)行驗(yàn)證第练。限制完以后，就可以直接用了玛荞，相當(dāng)于data中的數(shù)據(jù)的使用方法一樣娇掏。
第二種子組件給父組件傳值
然后是子組件給父組件傳值。因?yàn)閜rops是單向數(shù)據(jù)流勋眯，不能直接在子組件中修改父組件中的值婴梧。所以需要使用監(jiān)聽(tīng)事件的方式進(jìn)行修改數(shù)據(jù)。在子組件中調(diào)用方法的時(shí)候觸發(fā)父組件中監(jiān)聽(tīng)的方法changeFather客蹋。這個(gè)方法在父組件中@changeather進(jìn)行監(jiān)聽(tīng)塞蹭，當(dāng)觸發(fā)這個(gè)事件的時(shí)候，在父組件中執(zhí)行addGood方法.根據(jù)子組件中傳的值來(lái)在父組件中修改父組件中的值讶坯。
