Tracy Vue 小笔记之 mixin 混入

小小程序员——Tracy

已于 2022-07-24 12:26:57 修改

阅读量149

点赞数

分类专栏： Vue 文章标签： javascript vue.js node.js

于 2021-10-14 14:57:54 首次发布

本文链接：https://blog.csdn.net/weixin_48702807/article/details/120764167

版权

Vue 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

本文探讨了Vue.js中混入（mixins）的概念，如何通过混入实现组件间共享代码，如methods、data和filters。在子组件中导入并使用混入，当遇到命名冲突时，组件自身的定义优先。同时介绍了全局混入的使用方法，它在App创建时应用，适用于所有组件。文章还提及了混入与extends的相似性，但extends较少使用。

摘要由CSDN通过智能技术生成

如果多个组件中，都会调用相同的代码
如相同的组件，相同的 methods, 相同的变量，相同的过滤器等，那么可以利用混入 mixins混入的 js 文件命名为：mixin.js

混入的本质就是一个个对象， Vue2 和 Vue3 都支持混入。

//混入  minxin 导出的是一个对象，不是方法，这个对象中可以放 methods， data 等

export const dateFormateFilterYYYYMMDD = {
  filters: {
    dateFormate(time) {
      return timeFormate(time, "YYYY-MM-DD");
    },
  },
}

export const aaa = {
  data() {
    return {
      //这里的变量随便加
    };
  },
  created() {
  // 写的方法会自动添加到引用的组件中
  },
  methods:{
  //组件中的变量，这里也可以直接使用不会报错
  }
}

子组件用的时候

import { dateFormateFilterYYYYMMDDHHmm } from "@/index/common/mixin";

 data() {
    return {
     ....
    };
  },
  mixins: [dateFormateFilterYYYYMMDDHHmm], //这里是一个数组，因为可以混入好几个对象
  created() {
    ....
  },
filters:{
......

}

Tips：如果 Mixin 对象中的内容和我们组建本身的内容发生的冲突，既命名相同会发生什么？

情况1：组建本身的优先级会高，会被组建本身的覆盖

情况2：但是如果是生命周期函数，则都会执行

先执行的是混入的再执行组件本身的。

如果所有组件都想要用一个东西，就可以使用全局混入。在 App 方法中在引入混入。

const app = createApp(App);

app.mixin({
  data() {
    return {}
  },
  methods: {

  },
  created() {
    console.log("全局的created生命周期");
  }
});

app.mount("#app");

还有一个东西叫做 extends 和混入功能一样，因此很少用到