Vue混入(mixin)究竟是如何实现组件间代码复用和优化的？
- 内容介绍
- 文章标签
- 相关推荐
本文共计813个文字，预计阅读时间需要4分钟。
目录 + Vue混入（Mixin）的解读
1.钩子函数
2.常规方法合并
3.局部混入
4.全局混入
Vue中混入（Mixin）的注意事项混入（Mixin）解读 + 混入（Mixin）提供了灵活的方式，使组件可以共享非父子关系的方法和状态，来开发Vue组件中的可复用功能。目录
- vue混入(mixin)的解读
- 1.钩子函数
- 2.普通方法合并
- 3.局部混入
- 4.全局混入
- 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有同名方法或同名数据时，优先调用本组件的方法或数据，混入的部分失效
以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。
本文共计813个文字，预计阅读时间需要4分钟。
目录 + Vue混入（Mixin）的解读
1.钩子函数
2.常规方法合并
3.局部混入
4.全局混入
Vue中混入（Mixin）的注意事项混入（Mixin）解读 + 混入（Mixin）提供了灵活的方式，使组件可以共享非父子关系的方法和状态，来开发Vue组件中的可复用功能。目录
- vue混入(mixin)的解读
- 1.钩子函数
- 2.普通方法合并
- 3.局部混入
- 4.全局混入
- 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有同名方法或同名数据时，优先调用本组件的方法或数据，混入的部分失效
以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。