VUE mixin 使用示例详解_vue.js_

mixin 混入

mixin 混入可以在组件内部缺少数据时，使用mixin内的数据代替。

组件 data 优先级高于 mixin data 优先级

上述代码中，count 使用了 mixin 内的数据，由于内部 number 已经被定义，vue 优先使用内部的数据，再使用 mixin 的数据。

2 mixin 生命周期优先级

mixin 中的生命周期函数和组件的生命周期函数都会执行，而且 mixin 中的优先级更高。

效果如下：

3 局部 mixin 和全局 mixin

使用 mixins:[myMixin] 是局部载入mixin的方式，子组件不能获得 mixins 的值

运行结果如下：

全局 mixin 写法：

使用 app.mixin 挂载就是全局，组件可以自由使用。

效果如下：

4 自定义属性的优先级

vue 中，自定义属性就是直接写到vue下的属性，使用 this.$options.value 即可访问。

自定义属性组件的优先级比 mixin 优先级高。

结果如下：

mixin总结：

组件 data，methods优先级高于 mixin data，methods 优先级

生命周期函数，先执行 mixin 里边的，再执行组件里边的

自定义的属性，组件中的优先级高于 mixin 属性的优先级。

到此这篇关于VUE mixin 使用的文章就介绍到这了,更多相关VUE mixin 使用内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

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