一直聽朋友說vue組件化簡單好用，今天搞了一下組件之間的傳值，看了好多教程終于鼓搗出來了，分享一下踩的坑。

子傳父主要通過events，父傳子主要通過props，這里借用一張圖片，表達。

image

基于vue-cli

子組件向父組件傳值

子組件

定義點擊事件setVa 點擊之后往父組件傳“管理員列表”，用this.$emit（要觸發(fā)的事件，這個可以自定義，要傳給父組件的值）這個方法，

子組件需要某種事件比如change事件這樣的一個方法來觸發(fā)自定義事件

image

父組件

在父組件里引入子組件，然后在子組件標(biāo)簽上綁定子組件頁面里面自定義的事件，在methods里寫一個事件響應(yīng)的函數(shù)就可以了。

image

父組件向子組件傳值

子組件

props里面title就是父組件傳進來的

image

父組件

引入子組件，然后在子組件標(biāo)簽上寫：title（因為我是動態(tài)引入的所以加：，如果不是則不用）后邊跟你要傳的值

image

總結(jié)

無論是子傳父還是父傳子，她們都需要一個中間的介質(zhì)，子傳父介質(zhì)是自定義事件，父傳子是props，記住這兩點就可以實現(xiàn)基本的組件傳值了。

鏈接：http://m.itdecent.cn/p/839fec3ecfda