组件库开发技巧
插件就是一个store、一个组件库、接受一个vue参数
组件库开发
在组件库的main.js中 定义一个UI,给其一个install方法,导出出去
let UI = {};
UI.install = function(Vue){
Vue.component(Carousel.name, Carousel);
}
export default UI;
在使用中:
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属性即可。
<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>