持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

前言

在上一篇的文章中，我们了解了vue高级语法中的传送门Teleport，本章节中将会和大家一起学习vue里面的插件的使用的内容。

回顾

之前我们一起学过了mixin混入，通过混入能够对一些代码逻辑做一些封装，实际上如果使用plugin插件的这种功能，可以对代码做更好的封装。下面我们就一起来学习一下vue里面如何来编写一个插件，我们常见的比如说轮播的效果，其实都是通过插件来实现的，所以本篇文章大家还是需要仔细看一下。

概念

plugin插件主要也是把通用性的功能封装起来

使用

首先肯定是需要把通用代码放出来的。也就是定义一个vue实例。

  const app = Vue.createApp({
    template: `
      <div>JueJin</div>
    `
  });

  const vm = app.mount('#root');

然后在实例前面去定义一个插件对象。

const myPlugin = {
    install(app, options){
      console.log('实例：', app, '参数：', options)
    }
}

在插件对象中有一个install函数，接收两个参数。
参数app：接收vue实例。
参数options：接收传递给插件的数据。

最后在实例创建完成之后去使用插件。

app.use(myPlugin)

打印install方法中的两个参数之后，会发现只有app实例被打印出来了，而options参数是undefined。

由于参数是需要我们自己去传递的，所以可以在使用插件的时候，给muPlugin去传递一个参数对象。

app.use(myPlugin, {name: 'Hello World'})

扩展

既然我们在插件里面获取到了app实例，那么就可以对app实例进行扩展了。

在实例中定义一个全局的参数进行传递

在install方法中调用app实例中的provide定义一个全局的数据值。

const myPlugin = {
    install(app, options){
      app.provide('name', options.name)
    }
}

然后在实例中去使用这个全局的name数据值

const app = Vue.createApp({
    template: `
      <div>{{name}}</div>
    `
});

但是在浏览器中会发现vue给我输出了一个警告，说明了name没有找到。

使用provide定义的数据，需要使用inject申明之后才能使用。

在实例中定义一个inject来接收provide传递的数据值。

const app = Vue.createApp({
    inject: ['name'],
    template: `
      <div>{{name}}</div>
    `
});

这时候我们就在app上扩展了一个name数据传递给实例组件。

除了扩展一个数据值之外，还可以在插件中扩展自定义指令。

const myPlugin = {
    install(app, options){
      app.provide('name', options.name)
      app.directive('focus', {
        mounted(el){
          el.focus()
        }
      })
    }
}

const app = Vue.createApp({
    inject: ['name'],
    template: `
      <div>
        {{name}}
        <input v-focus />  
      </div>
    `
});

在以前的文章中，我们也学到过自定义指令的方法，就是通过app实例来调用directive方法来定义指令名称，并传入一个对象。

这里我们在指令对象中使用的是mounted生命周期函数，也就是在页面加载完成之后就会自动执行输入框获取焦点事件。

在实例中定义了一个input标签用来接收自定义指令，从而完成自动获取焦点。

除了属性值，自定义指令之外，还可以扩展之前学到的mixin混入，大家可以结合以前的内容尝试一下哦~

总结

其实app这样的一个vue实例已经给我们了，所以理论上在这个根实例上面可以去扩展任何想要扩展的东西。所以Plugin插件的通用性会更加强大一些，比mixin还要强大。

我们也能看到一些主流的这种vue的扩展，包括vue-router、vuex都是通过plugin的方式去扩展，它们扩展的原理也是上面我们介绍过的这些原理。

本篇文章主要和大家一起学习了plugin插件的原理和扩展方式，大家一起加油💪🏻💪🏻

【Vue3从零开始-第五章】5-4 插件的使用

前言

回顾

概念

使用

扩展

在实例中定义一个全局的参数进行传递

总结