Vue 中的 mixin 如何进行全局混入？-Vue.js-PHP中文网

Vue 中的 mixin 如何进行全局混入？

WBOY

发布： 2023-06-10 23:36:09

原创

2768人浏览过

vue 中 mixin （混入）是一种简便的组件复用方式，可以将一些常用的逻辑封装成 mixins，并注入到多个组件中进行复用，从而提高代码复用率和开发效率。vue 在 2.2.0 版本引入全局混入功能，可以将 mixin 注入到所有的组件中，本文将介绍如何在 vue 中进行全局混入，并探讨其优缺点。

全局混入的使用

在 Vue 中全局混入一个 mixin，我们需要使用 Vue.mixin 函数。该函数接受一个 mixin 对象作为参数，而这个 mixin 对象中可以定义和组件相同的各种属性和方法。

const myMixin ={
  methods: {
    // ...
  }
}
Vue.mixin(myMixin)

登录后复制

现在，我们全局发现 myMixin 对象中的方法可以被所有的组件访问到了。

那么，当我们在组件中同时定义了和 mixin 同名的属性或方法时，会发生什么呢？Vue 的 mixin 优先级遵循从下到上，从左至右的规则，即后面定义的 mixin 或组件中的同名属性或方法会覆盖之前的属性或方法。

例如：

立即学习“前端免费学习笔记（深入）”；

const mixinA ={
  created() {
    console.log('mixinA created')
  },
  methods: {
    foo() {
      console.log('mixinA foo')
    }
  }
}

const mixinB ={
  created() {
    console.log('mixinB created')
  },
  methods: {
    foo() {
      console.log('mixinB foo')
    }
  }
}

const myComponent ={
  created() {
    console.log('myComponent created')
  },
  mixins: [mixinA, mixinB],
  methods: {
    foo() {
      console.log('myComponent foo')
    }
  }
}

new Vue({
  el: '#app',
  components: {
    'my-component': myComponent
  }
})

// 输出
// mixinA created
// mixinB created
// myComponent created

登录后复制

在上述示例中，我们定义了两个 mixin（mixinA 和 mixinB），以及一个组件（myComponent）。其中，mixinA 和 mixinB 中都定义了 created 钩子函数和 foo 方法，而 myComponent 中也定义了一个同名的 foo 方法。最终，Vue 会按照后定义的 mixin 或组件同名属性或方法的优先级进行覆盖，最终输出的结果是：