Vue 中mixins混入使用

2021-10-28 15:01:59 阅读：161 来源： 互联网

标签：混入 Vue 对象 Mixins mixins js myMixins 组件

简介

mixins（混入），官方的描述是一种==分发 Vue ==组件中可复用功能的非常灵活的方式，mixins是一个js对象，它可以包含我们组件中script项中的任意功能选项，如data、components、methods 、created、computed等等。我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来，这样就可以提高代码的重用性，使你的代码保持干净和易于维护。

什么时候使用Mixins？

当我们存在多个组件中的数据或者功能很相近时，我们就可以利用mixins将公共部分提取出来，通过 mixins封装的函数，组件调用他们是不会改变函数作用域外部的。

如何创建Mixins？

在src目录下创建一个mixins文件夹，文件夹下新建一个myMixins.js文件。前面我们说了mixins是一个js对象，所以应该以对象的形式来定义myMixins，在对象中我们可以和vue组件一样来定义我们的data、components、methods 、created、computed等属性，并通过export导出该对象
在这里插入图片描述

使用Mixins

在需要调用的组件中引入myMixins.js文件，然后在export default 中引入你需要的对象即可

<script>
import { myMixins } from "@/mixins/myMixins.js";
export default {
  mixins: [myMixins],
  created() {
    this.age++;
  },
  mounted(){
  },
  methods:{
  }
};
</script>

结果:
在这里插入图片描述

详细讲解链接

标签：混入,Vue,对象,Mixins,mixins,js,myMixins,组件
来源： https://blog.csdn.net/z18237613052/article/details/121013847

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue 中mixins混入使用

目录

简介

如何创建Mixins？

使用Mixins