关于vue混入(mixin)的解读
作者:小铁匠95
这篇文章主要介绍了关于vue混入(mixin)的解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
vue混入(mixin)的解读
混入(mixin)提供了一种非常灵活的方式,来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
1.钩子函数
混入对象的钩子将在组件自身钩子之前调用。
// minxin.js const mixin = { data() { return{ msg1: '我是混入内容1', msg2: '我是混入内容2' } }, created() { console.log(this.msg3) } } export default mixin; </script> ... // 页面组件 <template> <div class="header"> <h1></h1> </div> </template> <script> import mixin from './mixins/mixin' export default { mixins: [mixin], name: 'Header', data(){ return{ msg1: '我是组件内容1', msg3: '我是组件内容2' } }, created() { console.log(this.msg2) console.log(this.msg1) }, } </script> // 我是组件内容2 // 我是混入内容2 // 我是组件内容1
2.普通方法合并
当混合值为对象的选项时,例如 methods、components、directive,将被混合为同一个对象,两个对象键名冲突时,取组件对象的键值对。
<body> <div id="app"></div> </body> <script src="./vue.js"></script> <script> var Mixins = { methods: { mixin: function() { console.log('MixinOne') }, mixinTwo: function () { console.log('MixinTwo') } } } new Vue({ el: '#app', mixins: [Mixins], methods: { mixin: function () { console.log('component') } }, mounted() { this.mixin() this.mixinTwo() } }) // component // MixinTwo </script>
3.局部混入
在componnets目录下新建mixins文件夹,并在mixins目录下创建一个mixin.js文件,代码如下:
const mixin = { data() { return { msg: "hello" } }, 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() } } // hello,这是mixin混入的方法
4.全局混入
在main.js加入以下代码
Vue.mixin({ data() { return { msg: 'hello' } }, methods: { mixinMethod() { console.log(this.msg+',这是mixin混入的方法') } } })
在组件中直接引用:
<template> <div>{{msg}}</div> </template> <script> export default { data() { return { } } mounted() { this.mixinMethod() } } // hello,这是mixin混入的方法 </script>
vue中mixin混入注意事项
1.页面和mixin的created都会执行,先执行mixin的,再执行当前页面的;
2.当前页面可以访问mixin的data和methods;
3.mixin里的方法可以调用页面的data和methods;
4.可以在当前页面改变mixin里的data
注意:当本组件与mixin有同名方法或同名数据时,优先调用本组件的方法或数据,混入的部分失效
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。