如何封装一个vue的插件

首先在toast文件夹去创建一个index.js文件，在js文件中创建一个对象，将他导出

// index.js
const toast = {}
export default toast

在main.js中导入这个文件，并且use它

// main.js
import toast from 'toast/index.js'
Vue.use(toast)

我们知道use，就是调用该对象的install方法，因此我们要在index.js中写入install方法

// index.js
const toast = {}
toast.install = function() {
    // console.log() 这里可以自行做一个输出，看是否调用
}
export default toast

做了输出应该知道，确实调用了该方法，这个时候我们就可以在这个install方法里面做一些事情了：

拿到toast组件

将组件加入到页面中

将组件的展示方法给vue实例

这里解释一下这个思路

首先要拿到组件才可以对组件进行操作，

其次想办法将组件加入到页面，才可以在其他组件中不需要引入，一行代码就可以将小框显示在页面，

再来要将组件的展示方法给vue实例的prototype属性，这样才可以直接this.$toast.show()

来编写install的代码

toast.install = function (Vue) {
    console.log('use了')
    // 1. 创建组件构造器
    const toastConstructor = Vue.extend(Toast)
    // 2. 使用组件构造器创建一个组件
     const toast = new toastConstructor()
    // 3. 将组件手动挂载到一个元素上
    toast.$mount(document.createElement('div'))
    // 4. 将节点插入到页面中，$el就是改组件的节点
    document.body.appendChild(toast.$el)
    // 5. 将组件加入到vue实例上
    Vue.prototype.$toast = toast
}

解释一下这里的代码：

install方法会自动传入一个参数，是Vue的对象

我们直接将toast插入页面中是不可行的，因为组件是虚拟dom，并不是node节点

因此我们要通过组件来创建真实dom，然后挂载到页面中

步骤就是，使用extend创建一个组件构造器，使用组件构造器实例化一个组件对象，将组件对象手动挂载到一个元素上，然后插入到页面中

最后把这个组件实例给Vue.prototype.$toast我们就可以在其他地方使用this.$toast

如何封装一个vue的插件

猜你喜欢