VUE调用组件

创建组件1

<template>
  <div class="List1" :style="Show" >
    <div style="text-align: center;">
      <el-button class="btn_title" v-for="item in List1" :key="item.label" @click="openurl(item.value)" >
        {{item.label}}
      </el-button>
    </div>
  </div>
</template>

export default {
  name:'Select1',
  props: {},
  data() {
    return {
      List1: [],
      Data1:'',
      Show:'',
    }
  },
  mounted() {
    this.GetList()
  },
  methods: {
    GetList() {
      GetList().then(res => {
        if (res.Data.length > 0) {
          res.Data.forEach(item => this.List1.push(
          {label:item.Code,
           value:item.Code}))
        }
      })
    },
    openurl(data){
        this.Data1=data;
        this.$emit('getData1', data)
    },
  }
}

创建组件2

<template>
  <div class="List2" :style="Show">
     <slot name="t_back"></slot>
    <div style="text-align: center;">
      <el-button class="btn_title"  v-for="item in List2" :key="item.label" @click="openurl(item.label)" >
        {{item.label}}
      </el-button>
     </div>
  </div>
</template>

export default {
  name:'Select2',
  data() {
    return {
      List2: [],
      Data2:'',
      Data1:'',
      Show:'',
    }
  },
  mounted() {
    //this.GetList()
  },
  methods: {
    openurl(data){
       this.Data2=data;
       this.$emit('getData2', data)
    },

    // 列表数据加载
    GetList(Data1) {
      this.List2=[];
      GetList(Data1).then(res=>{
        if(res.Data.length > 0){
            res.Data.forEach(item => this.List2.push(
            {label:item.Name,
             value:Name }))
        }       
      })
    },
  }
}

调用组件1,2

<template>
  <div class="app-container">
    <Select1 ref="Select1" @getData1="getData1Click"></Select1>
    <Select2 ref="Select2" @getData2="getData2Click" >
          <template #t_back>
             <el-button  @click="getbackSelect1">返回 </el-button>
          </template>
    </Select2 >
  </div>
</template>

export default {
  components: { Select1,Select 2},
  data() {
	    return {
	    	data1:'',
	    	data2:'',
	    };
  },
  mounted() {
    this.$refs.Select1.Show=''
    this.$refs.Select2.Show='display:none'
  },
  methods: {
    
		 getbackSelect1(){
		      this.$refs.Select1.Show='display:none';
		      this.$refs.Select2.Show='';
		 },
	    getData1Click(data){
	       this.data1=data;
	       this.$refs.=Select1.Show='display:none';
	       this.$refs.Select2.Show='';
	       this.$refs.Select2.GetList(data);
	    },
	    getData2Click(data){
	       this.data2=data;
	       this.$refs.Select2.Show='display:none'
	       this..aotuRefresh() // 刷新页面
	    }
   }