Vue混入的详解
简介
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
钩子函数合并
同名钩子函数将混合为一个数组，因此都将被调用。另外，混入对象的钩子函数将在组件自身钩子函数之前调用
<body> <div id="app"></div> </body> </html> <script src="./vue.js"></script> <script> var Mixins = { created() { console.log('Mixins Created') } } new Vue({ el: '#app', mixins: [Mixins], created() { console.log('#app Created') } }) // Mixins Created // #app Created </script>
数据对象合并
数据对象在内部会进行浅合并 (一层属性深度)，在和组件的数据发生冲突时以组件数据优先（组件的data中变量会覆盖混入对象的data中变量）
<body> <div id="app"></div> </body> <script src="./vue.js"></script> <script> var Mixins = { data: { msg: 'I am Mixins', msg1: 'I am Mixins msg1' }, created() { console.log('我是组件中的变量：' + this.msg2) } } new Vue({ mixins: [Mixins], el: '#app', data: { msg: 'I am #app', msg2: 'I am msg2' }, created() { console.log(this.msg) console.log('我是混入对象中的变量：' + this.msg1) } }) // 我是组件中的变量：I am msg2 // I am #app // 我是混入对象中的变量：I am Mixins msg1 </script>
普通方法合并
当混合值为对象的选项时，例如 methods、components、directive，将被混合为同一个对象，两个对象键名冲突时，取组件对象的键值对
<body> <div id="app"></div> </body> <script src="./vue.js"></script> <script> var Mixins = { methods: { mixin: function() { console.log('Mixin') }, mixinTwo: function () { console.log('MixinTwo') } } } new Vue({ el: '#app', mixins: [Mixins], methods: { mixin: function () { console.log('#app') } }, mounted() { this.mixin() this.mixinTwo() } }) // #app // MixinTwo </script>
局部混入
在 components 目录下创建一个mixins文件夹，并在 mixins 目录下创建一个 mixin.js 文件
在这里插入图片描述
在 mixin.js 文件里写入如下代码
const mixin = {
data() {
return {
msg: '哈哈'
}
},
methods: {
mixinMethod() {
console.log(this.msg+'，这是mixin混入的方法')
}
}
}
export default mixin
在需要的页面引入并使用
<template> <div>{{msg}}</div> </template> <script> import mixin from '../mixins/mixin' export default { mixins: [mixin], data() { return { } } mounted() { this.mixinMethod() } } // 哈哈，这是mixin混入的方法
全局混入
1. 在 HTML 中全局混入
一旦使用全局混入对象，将会影响到所有之后创建的 Vue 实例
<body> <div id="app"></div> </body> </html> <script src="./vue.js"></script> <script> Vue.mixin({ methods: { mixinOne: function() { console.log('mixinOne') } } }) new Vue({ el: '#app', methods: { mixinTwo: function () { console.log('mixinTwo') } }, mounted() { this.mixinOne() this.mixinTwo() } }) // mixinOne // mixinTwo </script>
2. 在 Vue 项目中全局混入
在 main.js 中写入如下代码 import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false Vue.mixin({ data() { return { msg: '哈哈' } }, methods: { mixinMethod() { console.log(this.msg+'，这是mixin混入的方法') } } }) /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) 在组件中直接使用 <template> <div>{{msg}}</div> </template> <script> export default { data() { return { } } mounted() { this.mixinMethod() } } // 哈哈，这是mixin混入的方法 </script>
————————————————
版权声明：本文为CSDN博主「凡_夫」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/fu983531588/article/details/90680873
