Vue if...else if 简便写法

[xiaweiss]

No description provided.

[xiaweiss]

<template>
  <SubjectMobile v-if="isMobile" :otherProps="otherProps" />
  <SubjectPC v-else :otherProps="otherProps" />
</template>

<script>
import SubjectMobile from './mobile/Index.vue'
import SubjectPC from './pc/Index.vue'
import {mapState} from 'vuex'

export default {
  name: 'subject-page-index',
  components: {
    SubjectMobile,
    SubjectPC
  },
  computed: {
    ...mapState(['isMobile']),
    com () {
      return this.isMobile ? SubjectMobile : SubjectPC
    },
    otherProps () {
      return 'otherProps'
    }
  }
}
</script>

等价写法

<template>
  <component :is="com" :otherProps="otherProps"/>
</template>

<script>
import SubjectMobile from './mobile/Index.vue'
import SubjectPC from './pc/Index.vue'
import {mapState} from 'vuex'

export default {
  name: 'subject-page-index',
  components: {
    SubjectMobile,
    SubjectPC
  },
  computed: {
    ...mapState(['isMobile']),
    com () {
      return this.isMobile ? SubjectMobile : SubjectPC
    },
    otherProps () {
      return 'otherProps'
    }
  }
}
</script>