关于自定义Vue插件的两种常见形式

自定义的vue插件,在我的理解中，分为两种:

1.注册成全局组件的形式

比如，你在main,js中Vue.use(yourPlugin) 然后在你的页面内可以这样使用

<template>
  <div id="yourPage">
    <yourPlugin></yourPlugin>
  </div>
</template>

2.注册成全局函数的形式

同样在main.js中Vue.use(yourPlugin)
但是在你的页面内是使用函数的形式调用的,比如

<template>
</template>
<script>
export default {
  mounted: {
    this.$yourPlugin.show({ yourData })
  }
}
</script>

第一种形式可以参考这位大大的 http://www.jianshu.com/p/d6855556cd75

主要记录一下第二种
js文件修改为

import temp from './temp.vue'
const pluginModel= {
  install (Vue, options) {
    // Vue.component(temp.name, temp)
    const Plugin= Vue.extend(temp)
    let pluginBox= document.querySelector('.plugin-box')
    function $pluginModel() {}
    $pluginModel.show = (data) => {
      return new Promise((resolve) => {
        if (!pluginBox) {
          pluginBox= new Plugin()
          pluginBox.$mount()
          document.querySelector('body').appendChild(pluginBox.$el)
        }
        pluginBox.show(data)
        resolve()
      })
    }
    Vue.prototype.$pluginModel= $pluginModel
  }
}

export default pluginModel

vue文件基本不变

<template lang="html" name="fade">
  <div class="plugin-box" v-if="isShow" @click="hide">
    <h1>瞧一瞧看一看啦哈</h1>
  </div>
</template>

<script>
export default {
  name: 'plugin',
  data () {
    return {
      isShow: false
    }
  },
  methods: {
    show: function (data) {
      this.isShow= true
    },
    hide: function () {
      this.isShow= false
    }
  }
}
</script>

<style lang="css">
</style>

然后在main.js中引入js文件并Vue.use(yourPlugin)

...
import yourPlugin from './yourPlugin.js'
Vue.use(yourPlugin)
...

使用方法放在最上面那里