Vue混入与插件的使用介绍

下面将对Vue混入与插件的使用进行详细讲解。

什么是Vue混入？

Vue混入是一种分发Vue组件中可复用功能的非常灵活的方式。混入（mixin）对象可以包含任意组件选项。当组件使用混入对象时，混入对象中的选项会被“混入”到组件自身的选项中。换句话说，混入就是将一些组件中相同的部分提取出来，然后在多个组件中共用。

混入的应用场景很广泛，例如：多个组件都需要注入相同的依赖，多个组件都有相同的生命周期，多个组件都有相同的方法等等。

如何使用Vue混入？

使用Vue混入很简单，只需要在定义组件时添加“mixins”属性，并指定要使用的混入对象即可。下面以混入组件依赖VueRouter为例进行说明：

定义Vue混入对象：

const MyMixin = {
  created() {
    console.log('本组件使用了MyMixin混入对象')
  },
  data() {
    return {
      name: 'MyMixin'
    }
  },
  methods: {
    sayHello() {
      console.log(`Hello, I'm ${this.name}`)
    }
  }
}

定义组件并引用混入对象：

import Vue from 'vue'
import VueRouter from 'vue-router'
import MyMixin from './my-mixin'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [...]
})

new Vue({
  mixins: [MyMixin],
  router,
  el: '#app',
  template: '<App/>',
  components: { App }
})

在上面的代码中，我们先定义了一个Vue混入对象，包含了created、data和methods选项。接着在组件定义中加入mixins属性，并将MyMixin对象作为其值，以引入混入对象。这样该组件就可以使用MyMixin对象中的选项了。

什么是Vue插件？

Vue插件是一个提供全局功能或者全局组件的Vue组件。插件通常会为你的应用程序增加一些全局的功能，例如添加全局过滤器，添加实例方法和指令等。

一个Vue插件应该暴露一个install方法，这个方法被调用时会传入Vue构造器以及选项对象。

如何使用Vue插件？

使用Vue插件也很简单，只需要将插件引入并在Vue实例初始化时通过Vue.use()方法引入即可。下面以使用element-ui插件为例进行说明：

import Vue from 'vue'
import Element from 'element-ui'        // 引入element-ui插件
import App from './App.vue'

Vue.use(Element)                      // 全局注册element-ui插件

new Vue({
  el: '#app',
  render: h => h(App)
})

在上面的代码中，我们引入了element-ui插件，并通过Vue.use()方法将其注册为全局插件。这样该应用程序就可以使用element-ui插件中的组件和指令了。

示例说明

下面给出两个混入和插件的完整示例：

混入示例

定义Vue混入对象：

const MyMixin = {
  created() {
    console.log('本组件使用了MyMixin混入对象')
  },
  data() {
    return {
      name: 'MyMixin'
    }
  },
  methods: {
    sayHello() {
      console.log(`Hello, I'm ${this.name}`)
    }
  }
}

定义两个组件分别使用MyMixin混入对象：

import Vue from 'vue'
import MyMixin from './my-mixin'

Vue.component('comp-a', {
  mixins: [MyMixin],
  template: `
    <div>
      <h2>Comp A</h2>
      <p>{{name}}</p>
      <button @click="sayHello()">Say Hello</button>
    </div>
  `
})

Vue.component('comp-b', {
  mixins: [MyMixin],
  template: `
    <div>
      <h2>Comp B</h2>
      <p>{{name}}</p>
      <button @click="sayHello()">Say Hello</button>
    </div>
  `
})

new Vue({
  el: '#app',
  template: `
    <div>
      <comp-a></comp-a>
      <comp-b></comp-b>
    </div>
  `
})

在上面的代码中，我们定义了一个名为MyMixin的Vue混入对象，并分别在两个组件中使用了该对象。组件中使用的模板中都包含了该混入对象中的data和methods项。运行代码后，可以看到两个组件都输出了“本组件使用了MyMixin混入对象”，并且点击Say Hello按钮后都能够正确打印出“Hello, I'm MyMixin”。

插件示例

定义插件：

const MyPlugin = {
  install(Vue, options) {
    Vue.prototype.$myMethod = function (foo) {
      console.log(`myMethod(${foo}) is called`)
    }

    Vue.directive('my-directive', {
      bind(el, binding, vnode, oldVnode) {
        el.textContent = binding.value + ' - myDirective'
      }
    })
  }
}

全局引入并使用插件：

import Vue from 'vue'
import MyPlugin from './my-plugin/vue'

Vue.use(MyPlugin)

new Vue({
  el: '#app',
  mounted() {
    this.$myMethod('test')
  },
  template: `
    <div>
      <span v-my-directive="'this is my directive'"></span>
    </div>
  `
})

在上面的代码中，我们定义了一个名为MyPlugin的Vue插件，其中暴露了Vue实例方法和指令。接着在Vue实例中引入并使用了该插件，同时也展示了对应的实例方法和指令分别如何使用。运行代码后，可以看到页面上的span元素中已经自动添加了“this is my directive - myDirective”的文本内容。并且在控制台中也正确打印出了“myMethod(test) is called”的信息。

以上就是Vue混入和插件的完整攻略，希望对你有所帮助！