父组件向子组件传值
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})