父組件向子組件傳值
1.在父組件中調用子組件時,定義要傳遞的參數
//使用子組件,并傳遞value作為prop<childComponent :childValue="parentValue"></childComponent>// 父組件的data中定義傳遞的參數data() {return {parentValue: "這是父組件的值" // 父組件的值};}
2.在子組件中,可以通過props屬性接收父組件傳遞的值
export default {name: "Info",dicts: ['order_status','product_type'],props: {childValue: {type: String,default: "",}, },
子組件向父組件傳值
如果子組件需要向父組件傳遞一個名為 ‘childFun’ 的事件,并傳遞一個數據 item
注:childFun為子組件中要傳遞參數的事件名,parentFun 為父組件中接收收子組件中數據的方法
1.在父組件中調用子組件時,定義接收參數的方法 parentFun
<childComponent ref="cusShortNamRef" @childFun="parentFun"></childComponent>//父組件接收數據的方法parentFun(val) {this.form.customerLedgerId = valthis.customerShortNameVisible = false}
2.在子組件需要傳遞數據的方法中使用this.$emit調用名為 childFun 的事件,并傳遞參數 item
//table單選handleCurrentChange(val) {this.currentRow = val;this.$emit("childFun ",this.currentRow.item)},
父組件改變子組件中屬性的方法
1.在父組件中調用子組件時,定義組件的ref屬性
<childComponent ref="childComRef" :childValue="parentValue"></childComponent>
2.通過this.$refs.childComRef.屬性名 來獲取子組件的dom,如
this.$nextTick(function(){this.$refs.childComRef.selectShow = false})