先说定义插件的基本语法

所有的内容都写在install(){}大括号里面

const 插件名称 = {
	install(使用插件的实例, 额外的参数) {
        
        },
};

具体实例代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    // 插件意思是把一些通用性的功能进行封装
    // 定义一个插件，用定义变量的方式来定义，里面用install定义来写插件的用途
    const myPlugin = {
      // 调用插件时, 会走 install 逻辑
      // install里面两个参数都是对象
      install(app, options) {
        // console.log(app,options);
        // 插件传值provide()到子组件
        app.provide("name", options.username);
        // 除了传值，插件里面也可以定义自定义指令
        // 指令的名字，focus,调用这个指令（v-focus），可以实现input框聚焦
        app.directive("focus", {
          mounted(el) {
            el.focus();
          },
        });
        // 插件里面也可以定义一个全局混入mixin，这个混入里面定义了一个变量
        app.mixin({
          data() {
            return {
              hello: "hello world",
            };
          },
        });
      },
    };
    // 根组件
    const app = Vue.createApp({
      // 模板，跟组件里面用了子组件
      //   模板里面使用自定义的全局指令
      //   模板里面用使用定义好的全局混入mixin,下面定义的混入里面有一个变量hello
      template: `
      <h1>{{hello}}</h1>
        <hello />
        <input type="text" v-focus/>
        `,
    });
    // 全局同步子组件
    app.component("hello", {
      // 子组件接收插件里面传值
      inject: ["name"],
      //   子组件里面的模板
      template: `
    <div>{{name}}</div>
    `,
    });
    // 使用定义好的插件
    app.use(myPlugin, { username: "zhangsan" });
    const vm = app.mount("#root");
  </script>
</html>

Vue里面的插件的基本语法和在组件里面使用插件

先说定义插件的基本语法