Vue动态组件 component :is的使用

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

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

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

代码示范

    
        
        
        
        
    


    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
            },
        }
    }

src/page/component1.vue

    
        组件1—文字
        我爱你，中国！
    


    export default {
        name: "component1"
    }

src/page/component2.vue

    
        组件2-图片
        
    


    export default {
        name: "component2"
    }

src/page/component3.vue

    
        组件3—输入框
        
    


    export default {
        name: "component3"
    }

效果展示

点击按钮组件1

Vue动态组件 component :is的使用

点击按钮组件2

Vue动态组件 component :is的使用

点击按钮组件3

Vue动态组件 component :is的使用

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

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

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

此处解释该index.js文件：

require.context( directory, useSubdirectories, regExp )