快捷導(dǎo)航

Vue動(dòng)態(tài)組件?component?:is的使用代碼示范

更新時(shí)間：2023年09月19日 11:33:27 作者：Ynnelf

vue?動(dòng)態(tài)組件用于實(shí)現(xiàn)在指定位置上，動(dòng)態(tài)加載不同的組件，這篇文章主要介紹了Vue動(dòng)態(tài)組件?component?:is的使用,需要的朋友可以參考下

代碼示范

<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/page/component1.vue

<template>
    <div>
        <h3>組件1—文字</h3>
        <span>我愛(ài)你，中國(guó)！</span>
    </div>
</template>
<script>
    export default {
        name: "component1"
    }
</script>
<style scoped>
</style>

src/page/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/page/component3.vue

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

效果展示

點(diǎn)擊按鈕組件1

點(diǎn)擊按鈕組件2

點(diǎn)擊按鈕組件3

以上內(nèi)容轉(zhuǎn)自：vue 動(dòng)態(tài)組件【詳解】component :is

component :is用法進(jìn)階之組件內(nèi)引入多個(gè)組件

<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結(jié)尾的文件')
console.log(
  ctx.keys(),
  'ctx.keys()---返回./common文件下(不包含子文件夾),以.vue結(jié)尾的文件的數(shù)組'
)
for (const key of ctx.keys()) {
  // 剝?nèi)ノ募_(kāi)頭的 `./` 和`.vue`結(jié)尾的擴(kuò)展名
  const module = key.replace(/^\.\//, '').replace(/\.vue$/, '')
  components[module] = ctx(key).default
  console.log(module, 'module---去掉`./`開(kāi)頭 和`.vue`結(jié)尾后的文件名')
  console.log(
    components[module],
    'components[module]---拿到ctx文件（包括html和default）'
  )
}
console.log(components, 'components---這些ctx文件集合')
export default components

此處解釋該index.js文件：

require.context( directory, useSubdirectories, regExp )