一直聽朋友說vue組件化簡單好用,今天搞了一下組件之間的傳值,看了好多教程終于鼓搗出來了,分享一下踩的坑。
子傳父主要通過events,父傳子主要通過props,這里借用一張圖片,表達。
基于vue-cli?
子組件向父組件傳值
子組件
定義點擊事件setVa 點擊之后往父組件傳“管理員列表”,用this.$emit(要觸發的事件,這個可以自定義,要傳給父組件的值)這個方法,
子組件需要某種事件比如change事件這樣的一個方法來觸發自定義事件
父組件
在父組件里引入子組件,然后在子組件標簽上綁定子組件頁面里面自定義的事件,在methods里寫一個事件響應的函數就可以了。
父組件向子組件傳值
子組件
? ? props里面title就是父組件傳進來的
父組件
引入子組件,然后在子組件標簽上寫:title(因為我是動態引入的所以加:,如果不是則不用)后邊跟你要傳的值