vue中mixins使用及实例

---

前言

本文主要介绍vue中mixins（混入）的使用及实例。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、mixins是什么？

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

二、使用步骤

1.创建目录结构

在src目录下创建nixins文件夹，文件夹里存放混入文件，也可在根目录下创建，具体可根据自己喜好

2.配置混入内容

代码如下：

import { mapGetters } from 'vuex'
export default {
	onShow() {
		this.setBadeg()
	},
	computed: {
		...mapGetters('cart', ['total'])
	},
	methods: {
		setBadeg() {
			// 设置徽标
			uni.setTabBarBadge({
				index: 2,
				text: this.total + ''
			})
		}
	}
}

3. 在组件中使用

---

注意

• 当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

• 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

var mixin = {
  created: function () {
    console.log('混入对象的钩子被调用')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('组件钩子被调用')
  }
})

// => "混入对象的钩子被调用"
// => "组件钩子被调用"

• 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})

vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"