组件库开发技巧

插件就是一个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>