Vue組件~父子組件之間的通訊(傳值)

1.父組件向子組件傳參

　　父組件中經過v-bind對要傳參數的綁定:(例如)

　　　　

　　　　:dataSourceName:是在子組件中要用到的值

　　　　"ctpSaveEchartSetting.dataSourceId":是在父組件中要傳的值

　　子組件中的接收經過props(數據值單項綁定的)進行接收:(例如)

　　　　

　　注:在props中有的變量就不能再data中再定義,或經過監測、計算屬性直接去改變,由於js中的對象和數組是引用對象,指向同一個內存空間,若是在子組件中改變props中的值會影響到父組件中的值的狀態.

2.子組件向父組件傳值

　　子組件中經過調用this.$emit方法

　　vm.$emit( event, arg ):event:父組件中的方法名;arg:子組件中要帶到父組件的參數能夠有多個值

　　vue禁止子組件向父組件傳參,只能經過事件觸發來改變:(例如)

　　

　　父組件中經過v-on來綁定事件在子組件上:(例如)

　　

　　@drawChart:是子組件中放在$emit方法中的第一個參數

　　="drawChart":是父組件中的方法名

3.父組件調用子組件上的方法

　　子組件中直接寫方法:(例如)

　　

　　父組件中:(例如)

　　在自定義組件上添加一個ref屬性

　　

　　在父組件中直接調用

　　

4.非父子組件之間使用vuex進行參數傳遞