vue 利用component组件和is属性实现动态组件
我刚学了一种 vue 新的布局方式,通过config配置,利用component组件和is属性来控制页面里面展示内容,在这里简单做一个 dome1,首先新建一些组件的vue页面这个文件的目录,其中component中的是页面展示的组件srcassets// 静态文件component// 组件文件BaseInfo.vue...
·
我刚学了一种 vue 新的布局方式,通过config配置,利用component组件和is属性来控制页面里面展示内容,在这里简单做一个 dome
1,首先新建一些组件的vue页面
这个文件的目录,其中component
中的是页面展示的组件
src
assets // 静态文件
component // 组件文件
BaseInfo.vue
OpenInfo.vue
CommentReview.vue
OrderInfo.vue
config // 配置文件
index.js
view // 页面内容
index.vue
这里展示一下 组件中的内容
<template>
// 其他页面也一样,只有背景色与页面的展示名不同,这就不一一介绍了
<div class="content">我是 OpenInfo 页面</div>
</template>
<script>
export default {
name:'openInfo'
data() {
return {};
}
};
</script>
<style scoped>
.content {
display: flex;
justify-content: space-between;
width: 1000px;
height: 200px;
background-color: green;
}
</style>
2,config 文件中的配置
const open = function () {
const vm = this
return [
{
// type:‘’ 可以通过type类型来判断展示那些组件内容
modules: [
{
id: 'baseInfo',
refName: 'baseInfo',
component: () => import('@/component/open/BaseInfo')
},
{
id: 'lineInfo',
refName: 'lineInfo',
component: () => import('@/component/open/OpenInfo')
},
{
id: 'reviewInfo',
refName: 'reviewInfo',
component: () => import('@/component/open/CommentReview')
},
{
id: 'orderInfo',
refName: 'orderInfo',
component: () => import('@/component/open/OrderInfo')
}
]
}
]
}
export const openModules = vm => {
return open.call(vm)
}
3,展示页面中的操作
<template>
<div class="content">
<div>我是 index</div>
<div v-for="(content,index) in openListValue" :key="index">
<!-- component标签创建动态组件,is属性指向谁,就显示哪个组件 -->
<component :key="content.index"
:is="content.component"
:ref="content.refName"
:refName="content.refName"
></component>
</div>
</div>
</template>
<script>
import { openModules } from "@/config/index";
export default {
data() {
return {
openList: [],
openListValue: []
};
},
mounted() {
this.getList();
},
methods: {
getList() {
this.openList = openModules(vm)[0];
this.openListValue = this.openList.modules;
}
}
};
</script>
<style scoped>
.content {
padding-top: 20px;
display: flex;
flex-direction: column;
width: 1000px;
}
</style>
页面展示:
image.png
注:这里配置可以用多个,给他配置里设置一个 type ,通过 type 类型,来控制展示的是那些界面。这里就不多介绍了
作者:jasmine_6aa1
链接:https://www.jianshu.com/p/14980d732e16
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
更多推荐
已为社区贡献6条内容
所有评论(0)