组件库开发技巧

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