关于vue混入(mixin)的解读_vue.js_

vue混入(mixin)的解读

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

1.钩子函数

混入对象的钩子将在组件自身钩子之前调用。

 //  minxin.js const mixin = {   data() {     return{       msg1: '我是混入内容1',       msg2: '我是混入内容2'     }   },   created() {     console.log(this.msg3)   } } export default mixin;  ... // 页面组件         // 我是组件内容2     // 我是混入内容2     // 我是组件内容1

2.普通方法合并

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

3.局部混入

在componnets目录下新建mixins文件夹，并在mixins目录下创建一个mixin.js文件，代码如下：

const mixin = {   data() {     return {       msg: "hello"     }   },   methods: {     mixinMethod() {       console.log(this.msg + ',这是mixin混入方法')     }   } } export default mixin;

在需要的页面中引入：

vue中mixin混入注意事项

1.页面和mixin的created都会执行，先执行mixin的，再执行当前页面的;

2.当前页面可以访问mixin的data和methods;

3.mixin里的方法可以调用页面的data和methods;

4.可以在当前页面改变mixin里的data

注意：当本组件与mixin有同名方法或同名数据时，优先调用本组件的方法或数据，混入的部分失效 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！