本文主要是介绍vue中的混入，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
基础
混入提供了一种非常灵活的方式，来分发Vue组件中可复用功能
一个混入对象可以包含任意组件选项，当组件中使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
var minxin = {created () {this.hello();},methods: {hello () {console.log('hello，我是混入中的函数');},}
}Vue.component('my-cmp', {mixins: [mixin],template: `<div>xx</div>`
})
局部混入
在 components 目录下创建一个mixins文件夹，并在 mixins 目录下创建一个 mixin.js 文件
在 mixin.js 文件里写入如下代码
const mixin = {data() {return {msg: '哈哈'}},methods: {mixinMethod() {console.log(this.msg+'，这是mixin混入的方法')}}
}export default mixin在需要的页面引入并使用，组件A.vue
<template><div>{{msg}}</div>
</template>
<script>
import mixin from '../mixins/mixin'
export default {mixins: [mixin],data() {return {}}mounted() {this.mixinMethod()}
}// 哈哈，这是mixin混入的方法选项合并的冲突解决
- 如果
组件自身的数据和混入的数据发生了冲突，那么会使用组件自身的数据 - 合并钩子函数，将合并为一个数组，先调用混入对象的钩子，再调用组件自身的钩子
- 合并值为对象的选项，如methods、components 等，将被合并为同一个对象，两个对象键名冲突时，取组件对象的键值对。
全局混入
混入可以进行全局注册，使用时应该格外小心，一旦使用全局混入，它将影响每一个之后创建的Vue实例，使用恰当时，可以用来为自定义选项注入处理逻辑。
// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({created () {var myOption = this.$options.myOption// 只有其他组件中有这个选项，才会执行if (myOption) {console.log(myOption)}}
})new Vue({myOption: 'hello!'
})
这篇关于vue中的混入的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
