1、父组件向子组件传值:
父组件
父组件中通过v-bind:参数名=“参数名”,向子组件中传递参数
<el-dialog title="渠道商已授权车场" :visible.sync="parkingDialogVisible" :close-on-click-modal="false" :modal-append-to-body="false">
<project-authorization-component v-bind:channelId="channelId"></project-authorization-component>
</el-dialog>
子组件
在子组件中用watch来监听参数值的变化,一旦参数值变化,就会触发watch监听的方法。
export default {
props: ['channelId'],
watch: {
channelId:{
handler(newVal,oldVal){
this.channelIdB = newVal;
this.queryChannelParkList(1)
},
deep: true,
immediate: true,
},
},
.......
data() {
return {
channelIdB:'',
......
}
}
}
2、子组件向父组件传值
子组件
如果this.parent.$emit();
this.$emit('getwithholdinfo',{'itemCode':this.code,'itemName':this.name})
父组件
在父组件中创建@getwithholdinfo="getwithholdinfo",与子组件传递的方法名相同,
<el-dialog title="选择代扣类型" :visible.sync="selectWithholdDialogVisible" :close-on-click-modal="false">
<select-withhold-component v-bind:refreshDialog="refreshDialog" @closedialog="closedialog" @getwithholdinfo="getwithholdinfo"></select-withhold-component>
</el-dialog>
然后,父组件中getwithholdinfo方法的实现如下:
//获取代扣方式name、code
getwithholdinfo:function(params){
this.dataForm.name=params.itemName;
this.dataForm.code=params.itemCode;
this.selectWithholdDialogVisible=false;
},