vue3 基础-插件 plugin

前几篇我们介绍了 mixin 混入的的方式能实现对代码的复用, 而本篇将要介绍的 plugin 将会更加适合这种通用性功能的代码的复用和扩展.

最常用的场景, 比如轮播图就非常实用 plugin 来实现封装, 首先来直观演示一下插件的使用过程.

plugin 初体验

这里我们给 app 扩展一个插件, 功能是给 app 扩展一个 name 属性, 值是 youge, 然后将这个数据传给子组件 Son 去使用, 当然这里跨层传递咱直接用 provide - inject 的方式即可.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>插件 plugin 初体验</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    // 1. 定义个插件, 给 app 扩展一个 name 数据, 并在 app 中使用
    const myPlugin = {
      install(app, options) {
        // console.log(app, options)
        // app 表示这个 vue 实例 app
        // options 表示传入的操作或者数据
        app.provide('name', 'youge')
      }
    }

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

    // 3. 通过 provide-inject 的方式来跨层传递/接收数据
    app.component('Son', {
      inject: ['name'],
      template: `<div>{{name}}</div>`
    })

    // 2. 注册定义的插件 myPlugin
    app.use(myPlugin)

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

  </script>
</body>

</html>

即 plugin 的基本使用流程就是:

  • 在 app 外定义个插件对象, 里面定义一个 install 方法, 传两个参数即 app 和 options
  • 在使用的时候, 这个 app 即是 vue 的实例, options 则是一些输入操作等, 功能逻辑都封装在 install 中
  • 在最外层对 plugin 进行一个注册使用, 即 app.user(插件名称)

更多的扩展

因其 plugin 的 install 能获取到 app 和 options 那理论上就可以做 n 多个扩展啦, 比如什么自定义指令呀, mixin呀, 甚至顶层属性扩展都是 ok 的.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>plugin 能随便你扩展啦</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    // 能支持更多你想要的扩展骚操作
    const myPlugin = {
      install(app, options) {

        // 1. 扩展数据
        app.provide('name', 'youge')

        // 2. 扩展自定义指令
        app.directive('focus', {
          mounted (el) {
            el.focus()
          }
        })

        // 3. 扩展 mixin
        app.mixin({
          mounted () {
            console.log('my mixini')
          }
        })

        // 4. 扩展 vue 底层的全局属性
        // 比如咱之前会将 echarts 整个应用挂载到 appd 的原型链上, 全局使用
        app.config.globalProperties.$echarts = 'echarts'
      }
    }

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


    app.component('Son', {
      inject: ['name'],
      mounted () {
        console.log('这里为演示将其写成字符串了哈: ', this.$echarts)
      },
      template: `
      <div>
        <div>{{name}}</div>
        <input v-focus />
      </div>`
    })

    // 记得一定要 注册定义的插件 myPlugin
    app.use(myPlugin)

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

  </script>
</body>

</html>

这个就是 plugin 的强大之处啦, 不过目前呢, 我好像除了轮播图, 似乎也没有用到哈哈哈, 但是它很强.

总结

  • 在 app 外定义个插件对象, 里面定义一个 install 方法, 传两个参数即 app 和 options
  • 在使用的时候, 这个 app 即是 vue 的实例, options 则是一些输入操作等, 功能逻辑都封装在 install 中
  • 在最外层对 plugin 进行一个注册使用, 即 app.user(插件名称)
  • 理论上能扩展 N 个东西, 如 传数据, mixin, 自定义指令, 底层属性等等, 就很强
posted @ 2022-09-26 23:25  致于数据科学家的小陈  阅读(416)  评论(0)  编辑  收藏  举报