首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue混入mixin

vue混入mixin使用特点

2022-12-22 10:21:25 作者：script~

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

什么是混入

混入 (mixin) ：是一种分发Vue组件中可复用功能的非常灵活的一种方式。混入对象（mixins）是一个js对象，它可以包含我们组件中script项中的任意功能选项，如data、components、created、methods 、computed、watch等等。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

创建Mixins

在src目录下创建一个mixins文件夹，文件夹下新建自己要定义的混入对象js文件。使用对象的形式来定义混入对象，在对象中可定义与vue组件一样的data、components、created、methods 、computed、watch等属性，并通过export导出该对象.

代码示例： pageMixin.js

export const  pageMixin={
    data() {
        return {
            page: { // 分页信息
                pageNo: 10, // 当前页
                limit: 10, // 每页行数
                total: 0, // 列表总数量
            },        
            tableList: [], // 列表数据
            loading: false, // 加载列表数据的Loading
            PAGE_SIZES: [5, 10, 20, 30, 50, 90], // 每页行数列表,用于切换每页行数
            LAYOUT: "total, sizes, prev, pager, next, jumper" // Element表格组件中使用的功能
        }
    },
    methods: {
        // 查询列表数据
        queryList() {},
        // 修改当前页
        handleCurrentChange(pageNo) {
            this.page.pageNo = pageNo;         
            this.queryList();
        },
        // 修改每页行数
        handleSizeChange(limit) {
            this.page.pageNo = 1;
            this.page.limit = limit;
            this.queryList();
        },
    },
}

使用Mixins

在需要调用的组件页面中引入pageMixin.js文件

import {pageMixin} from "@/mixins/pageMixin"
export default {
    mixins: [ pageMixin ],
    data() {
      return {    	
      }
    }        
}

组件调用了混入对象故混入对象的选项会合并到当前组件中。
当混入对象和组件含有同名选项时，这些选项将以恰当的方式进行“合并”。比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先，即发生冲突会覆盖混入对象的选项。

在组件（Home.vue）中使用

<template>
  <div class="home">
    <span>This is a Home page</span>
  </div>
</template>
<script>
import myMixins from "../mixins";   //导入混入（mixin）
export default {
  name: 'Home',
  mixins: [myMixins]     //使用混入（mixin）
}
</script>

注意观察Home组件里面，并没有任何的生命周期钩子或者方法，但是打开页面之后查看控制台，却打印了内容，这就是混入对象中的created钩子中的console.log()。

mounted生命周期钩子

<template>
  <div class="home">
    <span>This is a Home page</span>
  </div>
</template>
<script>
import myMixins from "../mixins";
export default {
  name: 'Home',
  mixins: [myMixins],
  mounted(){         
    this.hello()     //在该组件中并没用定义hello方法，使用的是混入中的hello
  }
}
</script>

选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

此时，同名的created生命周期钩子进行了合并，合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。而methods中的hello方法因为冲突，在合并时保留组件中的hello，即优先当前组件的选项，因此打印的是“hello from Home!”。

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

可复用性

开篇提过，混入对象可成为一个可复用功能，我们在另外的组件中引入已定义的混入对象，可实现同样的逻辑与功能。

如在另外一个组件About.vue使用该混入对象

<template>
  <div class="about">
    <span>This is an About page</span>
  </div>
</template>
<script>
import myMixins from "../mixins";
export default {
  name: "About",
  mixins: [myMixins]
};
</script>

混入对象中的console.log均被执行了，实现了逻辑或功能的复用。

那么有个问题，如果很多个组件同时使用同一个混入对象，这时候都要重复一个步骤，就是先导入混入对象，然后再使用，类似如下

<script>
import myMixins from "../mixins";
export default {
  mixins: [myMixins]
};
</script>

这样未免有点繁琐，且代码冗余，此时我们可以使用全局混入来优化这个问题。

全局混入

混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

在main.js中通过Vue.mixin()引入混入对象即可全局使用（作用于该Vue实例下的所有组件）

import mixin from './mixins';
Vue.mixin(mixin)

效果与在每个组件中单独引入混入对象相同，这便是全局混入。

注意

请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为插件发布，以避免重复应用混入。

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