兄弟组件传值

兄弟组件传值

方法一、 子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: {},

```
posted @ 2020-07-01 10:26  不知而无畏  阅读(450)  评论(0)    收藏  举报