Vue调用式组件开发

调用式组件

调用式组件这个名词应该不是官方的，因为在网上找了一大圈都没有发现这种组件的官方称呼，但是在很多开源的VueUI中都有这种组件存在，而且是一种很关键的组件。

例如Element UI 中的 Alert MessageBox Message Toast 等等等。

举个例子就很容易明白什么是调用式

new Vue({
  methods: {
    handleClick () {
      this.$alert('这是一个alert')
    }
  }
})

看完之后就发现超简单吧。

为什么要专门说它

emmm 因为在平常开发中写一个alert感觉怪怪的，但好像又没有什么问题！！！

那还是举个例子

平时开发的情形基本就如上述一样，通过data里面的数据控制，如果有多个alert那就要写特别特别多的列在一起，而data中要维护各种判断条件。如果alert中有一些其他的变量，那维护的东西就更乱了

稍微优化一点的是吧alert抽成组件，但还是避免不了的要把用到的alert组件都罗列到html中。

虽然可以实现alert的功能，但是有点反人类的感觉。

正常的逻辑是alert是什么样的，我调用的时候生成，关闭的时候就移除了。

如何开发调用式的组件

既然上面说到了种类组件要手动调用，而不是维护一大堆状态

看了下 element 源码，也自己实现了一个alert，放在了GIthub上。

// https://github.com/HaoYS/SongUI/blob/master/packages/alert/index.js
import Alert from './src/main.js'

Alert.install = function (Vue) {
    if(Vue.prototype.$alert) return 
    Vue.prototype.$alert = Alert
}

export default Alert

// https://github.com/HaoYS/SongUI/blob/master/packages/alert/src/main.js
import Vue from 'vue'
import Main from './main.vue'
const Alert = function (message, title, opt) {
    let Constructor = Vue.extend(Main)
    let alert = new Constructor({
        propsData: Object.assign({
            message, title
        }, opt)
    })
    alert.$mount()
    document.body.appendChild(alert.$el)
}

export default Alert

通过上面的方法可以看到，比较规范的组件开发是通过在install方法中实现创建一个新的Vue组件实例。

而使用方法就是简单的

import Vue from 'vue'
import SongUI, { Button, Toast, Alert } from '../src/index'

// Vue.use(Button)
// Vue.use(Toast)
// Vue.use(Alert)
Vue.use(SongUI)

window.vm = new Vue({
    el: '#app',
    data() {
        return {
            msg: 'msg'
        }
    },
    methods: {
        handleAlert () {
            this.$alert('这是一个msg', '这是一个title', {
                callback: action => {
                    console.log(action)
                }
            })
        }
    }
})