Solution to the problem of not taking effect of Vue3 dynamic component component

Problem: vue3 loop rendering dynamic component component does not take effect, the page is blank

When vue3 uses component dynamic components to display components, the components do not display the display blanks. It is no problem to use dynamic variable component to display components in vue2. I tried many methods and stepped on many pitfalls, so I recorded it:

  <div class="preview-list" >
    <component
      v-for="component in components" 
      :key=""
      :is=""
      v-bind="" 
      />
  </div>
<script setup lang="ts">
import LText from '@/components/LText'
import { ref } from 'vue'
interface styleProps = {
   text: string;
   fontSize: string;
}
interface componentData = {
  id: number;
  name: string;
  props?: styleProps;
}
const components = ref<componentData[]>([
    { id: 1, name: 'LText', props: { text: 'hello', fontSize: '12px'}},
    { id: 2, name: 'LText', props: { text: 'hello2', fontSize: '14px'}},
    { id: 3, name: 'LText', props: { text: 'hello3', fontSize: '16px'}}
])
</script>

Because vue3 uses the setup syntax, the component can be imported as long as it is imported.vue2Mounted in components, which caused the component I want to render is not rendered and the page appears blank. I tried many ways to add multiple scripts to specify the corresponding component name in the corresponding component, but it still did not take effect.

Solution

Use shallowReactive or shallowRef to redefine the corresponding component name. When traversing the component, is used to obtain the corresponding component with the object key, so that the component will be displayed.

  <div class="preview-list" >
    <component
      v-for="component in components" 
      :key=""
      :is="componentsName[]"
      v-bind="" 
      />
  </div>
<script setup lang="ts">
import LText from '@/components/LText'
import { ref, shallowReactive } from 'vue'
interface styleProps = {
   text: string;
   fontSize: string;
}
interface componentData = {
  id: number;
  name: string;
  props?: styleProps;
}
type componentName = {
  [key: string]: any
}
const components = ref<componentData[]>([
    { id: 1, name: 'LText', props: { text: 'hello', fontSize: '12px'}},
    { id: 2, name: 'LText', props: { text: 'hello2', fontSize: '14px'}},
    { id: 3, name: 'LText', props: { text: 'hello3', fontSize: '16px'}}
])
// Solutionconst componentsName = shallowReactive<componentName>({
  LText
})

</script>

Extension: Vue3 uses dynamic components Component

1. The concept of dynamic components

Multiple components are mounted in the same component through the component tag, and dynamically switched by triggering actions, and are often used with <keep-alive></keep-alive>.

2. Use scenarios

It is mostly used in the following scenarios:

1. Switching of tab column

Switch different menus in the management system to display tabs. Switching tabs can render different components, which are generally used with <keep-alive></keep-alive>.

2. Conditionally render components

Decide which component to render based on a certain condition. Implemented by using the v-if directive on the <component> element.

3. Dynamic switching components

Switch to display different components according to user interaction or state changes. Specify the component to render by using the is attribute on the <component> element.

4. Asynchronously load components

When the component is very large or needs lazy loading, dynamic components can be used to load components asynchronously, thereby increasing page loading speed.

5. Use in combination with routing

Use dynamic components in routing configurations to load corresponding components according to different routing paths.

3. Use examples

1. Mount the component

mount component through vue's defineAsyncComponent

const CourseData = defineAsyncComponent(() => import("@/components/Chart/"));

2. The is attribute of component

<component :is="" />

3. Dynamic component transmission value

The transmission of dynamic components follows the basic component transmission rules, in addition to supportingv-bindIn addition to passing values, it also supportsrefReference to pass values; when using reference to pass values, it is necessary to note that after determining the component, you need to use the ref attribute to pass values, otherwise the properties of the application component will not be able to obtain. usev-bindThe value passing code is as follows:

<template>
    <div>
        <component :is="" :data="reportData" :exam-data="exampData"/>
    </div>
</template>
<script lang="ts" setup>
const CourseData = defineAsyncComponent(() => import("@/components/Chart/"));
const item = reactive({
    component: CourseData
})
 
const reportData = ref("aaaaa")
const exampData = ref("bbbb")
</script>

4. Dynamic component data cache

If the data needs to be rendered dynamically, the data obtained before will be lost after component switching. At this time, if we want to maintain the state of these components during component switching to avoid repeated rendering and causing performance problems, we can use <keep-alive></keep-alive>PackageDynamic components to cache data in components:

<template>
  <div>
    <div  class="demo">
      <button
        v-for="tab in tabs"
        :key="tab"
        :class="['tab-button', { active: currentTab === tab }]"
        @click="currentTab = tab"
      >
        {{ tab }}
      </button>
      <keep-alive>
        <component
          :is=""
          class="tab"
        ></component>
      </keep-alive>
    </div>
  </div>
</template>

This is the article about the solution to the problem of the Vue3 dynamic component component not taking effect. For more related content related to the Vue3 component not taking effect, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!