Vue动态组件 component :is的使用

vue 动态组件用于实现在指定位置上，动态加载不同的组件，核心代码为：

<***ponent :is="***ponentTag"></***ponent>

javascript">data() {
    return {
        ***ponentTag: '',
    }
}

***ponentTag 为自定义的变量，将需要加载的组件名赋值给它，即可在<***ponent />标签出现的位置，渲染该组件。

代码示范

<template>
    <div style="padding: 30px">
        <button @click="change('1')">组件1</button>
        <button @click="change('2')">组件2</button>
        <button @click="change('3')">组件3</button>
        <***ponent :is="***ponentTag"></***ponent>
    </div>
</template>
<script>
    import ***ponent1 from './***ponent1'
    import ***ponent2 from './***ponent2'
    import ***ponent3 from './***ponent3'
    export default {
        ***ponents: {***ponent1, ***ponent2, ***ponent3},
        data() {
            return {
                ***ponentTag: '',
            }
        },
        methods: {
            change(index) {
                this.***ponentTag = '***ponent' + index
            },
        }
    }
</script>
<style scoped>
</style>

src/page/***ponent1.vue

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

src/page/***ponent2.vue

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

src/page/***ponent3.vue

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

效果展示

• 点击按钮组件1

• 点击按钮组件2

• 点击按钮组件3

以上原文链接：vue 动态组件【详解】***ponent :is_朝阳39的博客-CSDN博客_***ponent is

 ***ponent :is用法进阶之组件内引入多个组件

<***ponent :is="detail***ponentName" />

import ***ponents from './***ponents'

export default {
    ***ponents: {
        ...***ponents
    }
}

src/***ponents/index.js

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

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

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

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

此处解释该index.js文件：

require.context( directory, useSubdirectories, regExp )

1. directory{String}-读取文件的路径。
2. useSubdirectories{Boolean}-是否遍历文件的子目录。
3. regExp{RegExp}-匹配文件的正则。

require.context('./', false, /\.vue$/) 检索***ponents文件下的文件，不检索子文件夹，匹配以.vue结尾的文件。