vue新增自定义选项

背景

大家好，我是大熊啊！

今天接到需求需要重构老旧的php后台项目，但是吧，一下子全部重构好是来不及的，加上时间有限，我们老大是暂定将一些新模块拆分成前后端分离，然后用 iframe 的形式嵌入。（iframe 真是一个好东西[狗头表情]）

iframe 可能存在跨域问题，还有父子通信的一个问题，所以我是打算将两端通信方式做成一个插件，等项目分离好后，再拔掉就好了。然后就在想如果写成方法的话，如果页面用到就引入，后面删除可能会更加麻烦~~

脑洞大开，如果我能像 vue-router 那样加多一个选项，是不是语义化还有后期移除都会方便一些。于是就开始探寻实现的秘密。以下只是我一名菜狗所实现的最简单方式，以此记录一下。

实现

Vue.use(plugin) 可以安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

再配合 Vue.mixin，实现了一个自定义的选项。以下为大体的思路，具体细节还得靠各位大佬填充啦！！！

// install.js
export default install() {
  Vue.mixin({
    created() {
      if (window !== void 0) {
        const fn = this.$options.onIMessage
        window.addEveantListener('message', (e) => {
          typeof fn === 'function' && fn(e.data, e)
        })
      }
    }
  })
}

// index.js
import { install } from './install'

export default class IMessage {
  constructor() {}
}

IMessage.install = install

// main.js
import iMessage from '@/plugins/i-message'
Vue.use(iMessage)

// Test.vue
<script>
export default {
  onIMessage(data) {
    // 当使用postMessage与当前页面通信时，onIMessage会自动监听触发
  }
}
</script>

结语

看完我这篇，是不是浪费了你们的时间呢？哈哈哈哈。还有 postMessage 我还没有挂在到 Vue 上，先忽略不说啦。这几天再研究研究，说不定会有一堆没想到的坑~