插件就是一个store、一个组件库、接受一个vue参数
组件库开发
在组件库的main.js中 定义一个UI,给其一个install方法,导出出去
1 2 3 4 5 6 7
| let UI = {};
UI.install = function(Vue){ Vue.component(Carousel.name, Carousel); }
export default UI;
|
在使用中:
1 2 3 4 5 6
| import { createApp } from 'vue' import App from './App.vue' import UI from '@/libs/ui';
const app = createApp(App) app.use(UI).mount('#app');
|
递归组件的开发技巧
在无限多级菜单案例中,需要用到 递归组件 的设计。
也很简单,在递归组件中 调用自己,传入所需要的参数即可。
在下面这个案例中,ReSubMenu是递归组件,自己使用自己时,传入所需要的data属性即可。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| <template> <sub-menu> <template v-for="c of data.children"> <menu-item v-if="!c.children" :key="c.id" >{{c.title}}</menu-item> <re-sub-menu v-else :key="c.id" :data="c" ></re-sub-menu> </template> </sub-menu> </template>
<script> export default { name: 'ReSubMenu', props:{ data: Object } } </script>
|