Componente dinámico de Vue: es uso

Los componentes dinámicos de Vue se utilizan para cargar dinámicamente diferentes componentes en ubicaciones específicas. El código principal es:

<component :is="componentTag"></component>

data() {
    return {
        componentTag: '',
    }
}

componentTag es una variable personalizada, asígnele el nombre del componente que debe cargarse y podrá agregarlo al <componente /> etiqueta Donde aparece, se representa el componente.

Demostración de código

<template>
    <div style="padding: 30px">
        <button @click="change('1')">组件1</button>
        <button @click="change('2')">组件2</button>
        <button @click="change('3')">组件3</button>
        <component :is="componentTag"></component>
    </div>
</template>
<script>
    import component1 from './component1'
    import component2 from './component2'
    import component3 from './component3'
    export default {
        components: {component1, component2, component3},
        data() {
            return {
                componentTag: '',
            }
        },
        methods: {
            change(index) {
                this.componentTag = 'component' + index
            },
        }
    }
</script>
<style scoped>
</style>

src/página/component1.vue

<template>
    <div>
        <h3>组件1—文字</h3>
        <span>我爱你，中国！</span>
    </div>
</template>
<script>
    export default {
        name: "component1"
    }
</script>
<style scoped>
</style>

src/página/component2.vue

<template>
    <div>
        <h3>组件2-图片</h3>
        <img src="https://ss2.bdstatic.com/70cFvnSh.jpg" alt="">
    </div>
</template>
<script>
    export default {
        name: "component2"
    }
</script>
<style scoped>
</style>

src/página/component3.vue

<template>
    <div>
        <h3>组件3—输入框</h3>
        <input type="text">
    </div>
</template>
<script>
    export default {
        name: "component3"
    }
</script>
<style scoped>
</style>

Mostrar resultados

• Haga clic en el componente 1 del botón

• Haga clic en el componente 2 del botón

• Haga clic en el componente 3 del botón

El enlace del texto original anterior:Componente dinámico de vue [explicación detallada] componente: blog-CSDN blog_component de is_Chaoyang 39 es

 componente: es usoAvanzadoIntroducir múltiples componentes en un componente

<component :is="detailComponentName" />

import components from './components'

export default {
    components: {
        ...components
    }
}

src/components/index.js

const ctx = require.context('./common', false, /\.vue$/)
const components = {}
console.log(ctx, 'ctx---打印出./common文件下(不包含子文件夹),以.vue结尾的文件')

console.log(
  ctx.keys(),
  'ctx.keys()---返回./common文件下(不包含子文件夹),以.vue结尾的文件的数组'
)
for (const key of ctx.keys()) {
  // 剥去文件名开头的 `./` 和`.vue`结尾的扩展名
  const module = key.replace(/^\.\//, '').replace(/\.vue$/, '')
  components[module] = ctx(key).default

  console.log(module, 'module---去掉`./`开头 和`.vue`结尾后的文件名')

  console.log(
    components[module],
    'components[module]---拿到ctx文件（包括html和default）'
  )
}
console.log(components, 'components---这些ctx文件集合')
export default components

El archivo index.js se explica aquí:

require.context( directorio, useSubdirectories, regExp )

1. directorio{String}: la ruta para leer el archivo.
2. useSubdirectories{Boolean}: si se deben recorrer subdirectorios de archivos.
3. regExp{RegExp}-archivo coincidente regular.

require.context('./', false, /\.vue$/) recupera archivos bajo el archivo de componentes, no recupera subcarpetas y busca archivos que terminan en .vue.