Vue 插件

将公共功能封装起来使用，如轮播图

<script>
// 插件 轮播图 plugin  把公用性功能封装起来
// 定义插件 myPlugin
const myPlugin = {
    // 固定格式
    // 传递两个参数 一个根节点 app 一个options
    install(app, options) {
        // provide
        app.provide('name', 'Dell pc');
        //  directive
        app.directive('my-focus',{
            mounted(el) {
                el.focus();
            }
        });

        app.mixin({
            mounted() {
                console.log('mixin')
            }
        });
    }
}

    // 创建 vue实例
   const app = Vue.createApp({
   
    template:  `
    <my-title />
   `
    });

    app.component('my-title', {
        // 使用插件中的数据
        inject: ['name'],
        template:  `

    <div>
        {{name}}
        <input v-my-focus />
    </div>
    
   `
    })

    // 使用插件 myPlugin
    app.use(myPlugin);
//  app.use(myPlugin, {name: 'dell'});
    const vm = app.mount('#root');
    
</script>

简单的插件使用