点击不同按钮显示不同的组件

点击不同按钮显示不同的组件

主要使用change事件调用方法，来保存当前所在按钮的value，再在组件中使用v-show来判断是否该显示组件

示例：

<el-radio-group v-model="tabPosition"
                      @change="handleClick"
                      style="margin-bottom: 30px;"
                      class="navRadio"
                      fill='#d4237a'>
        <el-radio-button label="card" >会员办卡</el-radio-button>
        <el-radio-button label="charge">会员充值</el-radio-button>
        <el-radio-button label="combo">购买套餐</el-radio-button>
        <el-radio-button label="add">追加套餐</el-radio-button>
      </el-radio-group>

data(){
    return{
      showRecord: 'card',     //用来保存当前所在按钮位置
      tabPosition: 'card',    //初始按钮位置
    }
  },
  methods:{
    handleClick(value) {
      console.log(value);
      this.showRecord = value
    },

<!--  通过showRecord来保存目前所在卡片的位置，从而判断该显示哪个组件  -->
    //这些都是子组件
    <cardRecord ref="card" v-show="showRecord === 'card'"></cardRecord>
    <recharge ref="charge" v-show="showRecord === 'charge'" ></recharge>
    <combo ref="combo" v-show="showRecord === 'combo'" ></combo>

不同页面调用不同组件，效果如图：