Vue Mixins混入介绍与使用
更新时间：2023年02月02日 08:30:42 作者：博主花神
如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度，针对这种情况官方提供了Mixins特性，这时使用Vue mixins混入有很大好处，下面就介绍下Vue mixins混入使用方法，需要的朋友参考下吧
混入(Mixins)介绍
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能
通俗的讲
将组件的公共逻辑或者配置提取出来进行存放
哪个组件需要用到时，直接将提取的这部分混入到组件内部即可
再通俗的讲
就是将项目中使用频繁的方法，提取出一个文件中
在哪个页面中使用的时候，再混入进来，也就是引用进来
注意的是，这里提取的是逻辑和配置，也就是js等，可不是css和html
Mixins使用
1，建立js文件
文件名随便，我建立一个mixins.js
2，mixins.js代码
export const mixins = {
data() {
return {
msg: "我是乞力马扎罗",
};
},
computed: {},
created() {
console.log("我是mixin中的created生命周期函数");
},
mounted() {
console.log("我是mixin中的mounted生命周期函数");
},
methods: {
getclick() {
console.log("我是mixin中的点击事件");
},
},
};
3，页面局部混入
- 当你想使用混入文件中的方法，页面中直接可进行this.方法名，调用
- 当你想使用混入文件中的变量，页面中直接可进行this.变量名，调用
- ata数据与组件中的data数据冲突时，组件中的data数据会覆盖mixin中数据，方法名同样如此
- mixins: [mixin],注意，前者名字是vue提供的属性名，不能改，中括号里的名字可以进行更改，但得与import引入名一致
<script>
import mixin from "@/config/mixins.js"
export default {
mixins: [mixin],
data() {
return {
};
},
onShow(){
console.log(this.msg)//乞力马扎罗
console.log(this.getclick())//我是mixin中的点击事件
},
}
</script>
好的，看一下其他人的总结
mixin中的生命周期函数会和组件的生命周期函数一起合并执行
mixin中的data数据在组件中也可以使用。
mixin中的方法在组件内部可以直接调用。
生命周期函数合并后执行顺序：先执行mixin中的，后执行组件的。
并且，一个组件中改动了mixin中的数据，另一个引用了mixin的组件的数据不受影响，不同组件中的mixin是相互独立的！
全局混入
（不建议使用，容易造成污染）
修改main.js数据，进行全局注册
import mixins from "@/config/mixins.js" Vue.mixin(mixins);
页面中使用直接就可以this.名字进行使用，
<script>
export default {
data() {
return {
};
},
onShow(){
console.log(this.msg)//乞力马扎罗
console.log(this.getclick())//我是mixin中的点击事件
},
}
</script>
到此这篇关于Vue Mixins混入介绍与使用的文章就介绍到这了,更多相关Vue Mixins混入内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天小编就为大家分享一篇vue.js input框之间赋值方法具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
vue中element-ui组件默认css样式修改的四种方式
在前端项目中会运用各种组件,有时组件的默认样式并不是你项目中所需要的,你需要更改样式,下面这篇文章主要给大家介绍了关于vue中element-ui组件默认css样式修改的四种方式,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了vue路由传参使用query传参页面刷新数据丢失问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要给大家介绍了关于vue获取当前路由的五种方式,文中通过代码示例介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2023-08-08
最近在研究Vue的组件库,之前也用过$attrs和$listeners,官方文档描述的不太详细,也没有太好的例子,下面这篇文章主要给大家介绍了关于Vue中$attrs和$listeners详解以及使用的相关资料,需要的朋友可以参考下2022-11-11
vue中的el-form表单rule校验问题(特殊字符、中文、数字等)
这篇文章主要介绍了vue中的el-form表单rule校验问题(特殊字符、中文、数字等)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
文件上传是web开发中一个常见的需求,Vue.js作为一款流行的前端框架,也提供了方便的方法来实现文件上传功能,下面这篇文章主要给大家介绍了关于基于Vue实现文件上传的几种实现方式,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue权限管理系统的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
父子组件之间的通信就是props down,events up,父组件通过属性props向下传递数据给子组件,子组件通过事件events 给父组件发送消息,这篇文章主要给大家介绍了关于vue中组件的props属性的相关资料,需要的朋友可以参考下2021-11-11
使用elementUI表单校验函数validate需要注意的坑及解决
这篇文章主要介绍了使用elementUI表单校验函数validate需要注意的坑及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
最新评论