On gists

Dynamic component (h or :is with v-bind)

Vue.js

Dynamic.vue Raw #

<!-- 1 -->
<component
    v-if="transport?.image"
    :is="typeof transport.image === 'object' ? 'aw-img' : 'img'"
    v-bind="
      typeof transport.image === 'object'
        ? { image: transport.image, size: 'eop-icon', style: 'max-width: 40px' }
        : { src: transport.image, size: 'eop-icon', style: 'max-width: 40px' }
    "
  />
  
  
  <!-- 2 h render -->
 const transportImage = computed(() => {
      if (!props.transport?.image) return null

      if (typeof props.transport.image === 'object') {
        return h(resolveComponent('aw-img'), {
          image: props.transport.image,
          size: 'eop-icon',
          style: 'max-width: 40px'
        })
      } else {
        return h('img', {
          src: props.transport.image,
          size: 'eop-icon',
          style: 'max-width: 40px'
        })
      }
    })