常见网站结构,上海发布公众号官网,7k7k小游戏在线玩,Wordpress排名插件实际的Vue应用中#xff0c;常常需要提供功能菜单#xff0c;例如#xff1a;文件下载、用户注册、数据采集、信息查询等等。每个功能菜单项#xff0c;对应某个.vue组件。下面的代码#xff0c;提供了一种独特的异步加载、动态渲染功能菜单的构建方法#xff1a;
s… 实际的Vue应用中常常需要提供功能菜单例如文件下载、用户注册、数据采集、信息查询等等。每个功能菜单项对应某个.vue组件。下面的代码提供了一种独特的异步加载、动态渲染功能菜单的构建方法
script setup
import {defineComponent, getCurrentInstance, h} from vue//定义需要显示的功能菜单项
const menus [{id: home, name: 首\u3000页},{id: user.login, name: 用户登录},{id: user.regist, name: 用户注册},{id: college.list, name: 学院风采},{id: query.student, name: 学生查询},{id: enroll.chart, name: 招生一览},{id: upload.docs, name: 资料上传},{id: chat.room, name: 畅论空间}
]
const app getCurrentInstance().appContext.app //当前Vue应用
//异步加载.vue组件并注册
Promise.all( menus.map(({id}) id home ?{__name: id, setup: null, render: null} : import(./modules/${id}.vue))
).then(modules modules.forEach(m app.component(m.__name, m))) //注册组件
const store app.config.globalProperties.$pinia._s.get(loginer) //状态管理数据
//动态渲染功能菜单项
const AppMenu defineComponent({ //定义功能菜单组件render() {return h(div, {class: home-menu},h(ul, {class: home-ul}, //用无序列表构建菜单项menus.map(({id, name}) h(li, { //无序列表的列表项对应功能菜单项id: id, //模块idinnerText: name, //菜单名onClick: event store.setModule(event.target.id) //加载模块}))))}
})
/scripttemplateapp-menu/app-menu
/template 上述处理需要细细琢磨。提示.vue组件解析、编译后的基本构成要素为{__name: 组件id, setup: {组合式函数}, render: {渲染函数}}。需要充分认识这一特点才能更好地理解上述处理方法。
