Vue 插件声明方法

我是杰仔zone

于 2020-04-29 18:30:02 发布

阅读量429

点赞数

分类专栏： Vue 前端文章标签： vue

本文链接：https://blog.youkuaiyun.com/jiezaizone/article/details/105846145

版权

前端同时被 2 个专栏收录

8 篇文章

订阅专栏

Vue

7 篇文章

订阅专栏

本文探讨了Vue插件的声明方法，重点介绍了如何通过组件混入（mixin）来实现代码和功能的复用，为Vue应用开发提供灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue插件声明

 
// 插件定义
MyPlugin.install = function (Vue, options) {
// 1. 添加全局⽅方法或属性 Vue.myGlobalMethod = function () {
// 逻辑... }
// 2. 添加全局资源 Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) { // 逻辑...
}
...
})
// 3. 注⼊入组件选项
Vue.mixin({
created: function () {
// 逻辑... }
...
})
// 4. 添加实例例⽅方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑... }
}
// 插件使⽤用 Vue.use(MyPlugin)

组件混⼊（mixin）

Mixin 提供一种方式给Vue可以灵活复用功能（代码，方法等）

// 定义Mixin 对象
const myMixin = {
  created: function() {
    this.say()
  },
  methods: {
    say: function() {
      console.log('hello world')
    }
  }
}

// 定义一个使用混入对象的组件
const Compoment = Vue.extend({
  mixins: [myMixin]
})