2-8动态组件

一、三目运算

<template>
  <div>
    <button @click="handleToggle">toggle</button>
    <component :is="isToggle?one:two"></component>
  </div>
</template>
<script>
import One from "../components/One.vue";
import Two from '../components/Two.vue'
export default {
  data() {
    return {
      isToggle:false,
      one: "One",
      two:"Two"
    };
  },
  components: {
    One,
    Two
  },
  methods:{
      handleToggle(){
          this.isToggle = !this.isToggle
      }
  }
};
</script>

二、ref

$refs：一个对象，持有已注册过ref的所有子组件
ref:被用来给元素或者子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例；
第一步：给子组件添加ref属性
第二步：添加点击事件，触发动态组件显示组件

 <view class="content-main perCenter">
             <view class="tab-list df-c">
            <view class="tab-item" @click="handleShowWel">
                <img src="~@/static/img/icon-welfare.png" alt="" class="icon" />
                福利记录
            </view>
            <view class="tab-item" @click="handleShowPri">
                <img src="~@/static/img/icon-prize.png" alt="" class="icon" />
                奖品记录
            </view>
        </view>
        <prizeRecords ref="priRecords"></prizeRecords>
        <welfareList ref="welRecords"></welfareList>
    </view>

export default class extends Vue {
    handleShowPri() {
        const priRecords: any = this.$refs.priRecords;
        priRecords.show();
    }
    handleShowWel() {
        const welRecords: any = this.$refs.welRecords;
        welRecords.show();
    }
}