Блог

Простой рабочий пример динамического компонента Vue2

 
<template>
    <div>
        <h1>O_o</h1>
        <component :is="name"/>
        <button @click="onClick">Click me !</button>
    </div>
</template>

<script>
    export default {
        data: () => ({
            isShow: false
        }),
        computed: {
            name() {
                return this.isShow ? () => import('./DynamicComponent') : '';
            }
        },
        methods: {
            onClick() {
                this.isShow = true;
            }
        },
    }
</script>
 

Все работает, все отлично. Я начал пробовать, как это будет работать с Composition API.

 <template>
    <div>
        <h1>O_o</h1>
        <component :is="state.name"/>
        <button @click="onClick">Click me !</button>
    </div>
</template>

<script>
    import {ref, reactive, computed} from 'vue'

    export default {
        setup() {
            const state = reactive({
                name: computed(() => isShow ? import('./DynamicComponent.vue') : '')
            });

            const isShow = ref(false);

            const onClick = () => {
                isShow.value = true;
            }

            return {
                state,
                onClick
            }
        }
    }
</script>
 

Запускаем, компонент не отображается на экране, хотя ошибок не отображается.

Вы можете узнать больше о ‘defineAsyncComponent’ здесь https://labs.thisdot.co/blog/async-components-in-vue-3

или на официальном сайте https://v3.vuejs.org/api/global-api.html#defineasynccomponent

 import { defineAsyncComponent, defineComponent, ref, computed } from "vue"

export default defineComponent({
setup(){
const isShow = ref(false);
const name = computed (() => isShow.value ? defineAsyncComponent(() => import("./DynamicComponent.vue")): '')

const onClick = () => {
    isShow.value = true;
  }
 }
})
 

Вот как вы можете загружать динамические компоненты в Vue 3. Пример динамического импорта из коллекции значков внутри /icons папки с префиксом «icon-«.

BaseIcon.vue

 <script>
import { defineComponent, shallowRef } from 'vue'

export default defineComponent({
  props: {
    name: {
      type: String,
      required: true
    }
  },
  setup(props) {
    // use shallowRef to remove unnecessary optimizations
    const currentIcon = shallowRef('')

    import(`../icons/icon-${props.name}.vue`).then(val => {
      // val is a Module has default
      currentIcon.value = val.default
    })

    return {
      currentIcon
    }
  }
})
</script>

<template>
    <svg v-if="currentIcon" width="100%" viewBox="0 0 24 24" :aria-labelledby="name">
      <component :is="currentIcon" />
    </svg>
</template>
 

Вам не нужно использовать computed или watch. Но перед его загрузкой и разрешением нечего отображать, вот почему v-if используется.

UPD Итак, если вам нужно изменить компоненты (значки в моем случае), изменив реквизит, используйте watchEffect в качестве оболочки вокруг import функции.

 watchEffect(() => {
  import(`../icons/icon-${props.name}.vue`).then(val => {
    currentIcon.value = val.default
  })
})
 

Не забудьте импортировать его из vue =)

Компонент должен быть добавлен в components параметр, затем просто верните его имя, используя вычисляемое свойство на основе свойства ref isShow :

 components:{
   MyComponent:defineAsyncComponent(() => import("./DynamicComponent.vue"))
},
setup(){
const isShow = ref(false);
const name = computed (() => isShow.value ? 'MyComponent': '')

const onClick = () => {
    isShow.value = true;
}
}