Vue动态组件 component :is的使用代码示范
作者：Ynnelf
vue 动态组件用于实现在指定位置上，动态加载不同的组件，这篇文章主要介绍了Vue动态组件 component :is的使用,需要的朋友可以参考下
vue 动态组件用于实现在指定位置上，动态加载不同的组件，核心代码为：
<component :is="componentTag"></component>
data() {
return {
componentTag: '',
}
}componentTag 为自定义的变量，将需要加载的组件名赋值给它，即可在<component />标签出现的位置，渲染该组件。
代码示范
<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>我爱你，中国！</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>效果展示
点击按钮组件1
点击按钮组件2
点击按钮组件3
以上内容转自：vue 动态组件【详解】component :is
component :is用法进阶之组件内引入多个组件
<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此处解释该index.js文件：
require.context( directory, useSubdirectories, regExp )
- directory{String}-读取文件的路径。
- useSubdirectories{Boolean}-是否遍历文件的子目录。
- regExp{RegExp}-匹配文件的正则。
require.context('./', false, /\.vue$/) 检索components文件下的文件，不检索子文件夹，匹配以.vue结尾的文件。
到此这篇关于Vue动态组件 component :is的使用的文章就介绍到这了,更多相关Vue component :is 使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！