兄弟组件传值
兄弟组件传值
方法一、 子1传父,父传子2
父级组件:
```
<template>
<div>
<!--这个组件是子1的值传给父-->
<BatchCompany @excelUpResponse="getResponse"></BatchCompany>
<!--这个组件是父的值传给子1-->
<BatchCompanyList :responseList="responseData"></BatchCompanyList>
</div>
</template>
<script>
import BatchCompany from "@/components/BatchCompany";
import BatchCompanyList from "@/components/BatchCompanyList";
export default {
data() {
return {
responseData: {}
};
},
components: {
BatchCompany,
BatchCompanyList
},
methods: {
getResponse(res) {
console.log("执行子传父getResponse()");
this.responseData = res;
}
}
};
</script>
<style>
</style>
```
子1组件给父组件传值:
```
//获取数据后调用传数据的方法
this.$emit('excelUpResponse',response);
```
子二组件接收传值:
```
export default {
props:{
responseList:Object 定义要接收的参数,参数类型
},watch:{
//监听数据的改变
responseList:function(val){
if(val.code==4101)
{
this.$message.success(val.msg);
this.tableData=val.data.success;
this.tableData2=val.data.fail;
}else{
this.$message.warning(val.msg);
}
}
},
components: {},
```
浙公网安备 33010602011771号