住房与建设部网站 2018 128号,建设银行海淀支行 网站,磁力天堂,网页设计师资格证查询官网分析页面-页面组件化 之前写了一个项目#xff0c;大屏页面是通用页面但是遇到个别用户想要定制化#xff0c;但是主页如果去做判断显得太过臃肿#xff0c;后续也无法判断#xff0c;由于公司不想维护多套代码#xff0c;于是就考虑抽离成组件#xff01;直接看代码大屏页面是通用页面但是遇到个别用户想要定制化但是主页如果去做判断显得太过臃肿后续也无法判断由于公司不想维护多套代码于是就考虑抽离成组件直接看代码 之前只有一个页面为zhsy,考虑到别的地方有跳转到zhsy由于不能影响别的页面的跳转逻辑所以这边考虑到把zhsy里面的代码抽离成组件然后通过引入组件然后组测组件最后通过后端返回的定制化的名字来控制页面显示
templatecomponent :isdom[curSy] /
/template
script setup
import tyZhsy from ./tyzhsy.vue
import mcZhsy from ./otherZhsy/mcZhsy.vue
const curSy ref(tyZhsy);
const store useStore();
let name store.getters.diffSystem.name
const dom shallowReactive({tyZhsy, mcZhsy
})const changeName () {curSy.value name Zhsy
}
changeName()
/script
style scoped langscss/style
2.vite项目中如果想要更灵活可以考虑动态引入组测组件来实现这个功能,先通过import.meta.glob(./*.vue)引入所有文件然后再遍历文件后注册组件成为全局组件具体是否为全局组件看个人需求使用这样全局上就有所有的定制化组件再通过后端返回的组件名动态渲染 const modules import.meta.glob(./*.vue);
const lsbjcomponents {install: function (app) {for (let path in modules) {modules[path]().then((mod) {const fileName path?.split(/).pop().replace(.vue, );app.component(fileName, mod[default]);});}},
};
