mixin 混入

已于 2024-08-09 11:03:46 修改
阅读量1.1k 收藏 13
点赞数 26
分类专栏： vue.js 文章标签： vue.js 前端 javascript
于 2024-08-09 10:33:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xyx8958/article/details/141054527
版权

一、mixin概念

mixin是vue提供的一种方式来分发vue组件的可复用功能，可以将相同的方法、字段等抽离出来，避免重复定义。混入分为局部混入和全局混入，一个mixin对象可以包含任意组件选项，data、methods、mounted等。

当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。当组件使用了mixin时, mixin中的生命周期函数会先执行,然后在执行组件中的生命周期。

二、使用

1、局部混入

新建mixins文件夹，并在mixins目录下创建一个mixin.js文件，代码如下：

const mixin = {
  data() {
    return {
      msg: "我是张三"
    }
  },
  methods: {
    mixinTest() {
      console.log(this.msg)
    }
  }
}
export default mixin;

在需要的页面中引入：

<template>
    <div>{{msg}}</div>
</template>
<script>
import mixin from '../mixins/mixin'
export default {
    mixins: [mixin],
    data() {
        return {
        }
    }
    mounted() {
        this.mixinTest()
    }
}

//我是张三

2、全局混入

在main.js中直接引入使用即可。

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

这样就可以直接在组件中使用mixin中定义的字段和方法等。

三、mixin混入的注意事项

  • mixin 中定义的方法和参数在各组件中不共享，即当前组件对mixins的属性的修改，其他也引用了这个mixins的组件不会受影响;
  • mixin中定义的生命周期函数会比引用组件的生命周期先执行, 会和组件中定义的methods,created等选项合并调用;
  • mixin对象里的(components、methods 、computed、data)这些选项，混入组件时选项会被合并，重名冲突时优先采用组件中定义的数据
  • 如果同时引入多个mixin对象, 执行顺序和引入顺序一致;

四、以uniapp开发小程序举例，使用mixin实现各个页面的分享功能

在小程序中如果想实现分享功能，需要在各个组件中单独写分享方法，如果页面太多的话，非常麻烦。所以可以使用mixin来简化这个流程。

1.首先在mixins目录下新建share.js

export default {
	onShareAppMessage(res) {
		return {
			path:'/pages/tabIndex/tabIndex',
			success(res) {
				uni.showToast({
					title: '分享成功'
				})
			},
			fail(res) {
				uni.showToast({
					title: '分享失败',
					icon: 'none'
				})
			}
		}
	}
}

2、在main.js中引入，并混入到vue对象上。

import share from './mixins/share.js'
Vue.mixin(share)

五、mixin混入对象和Vuex的区别：

  1. vuex中的方法和变量是可以相互读取并相互更改的，mixin不会。mixin可以定义公用的变量或方法，但是mixin中的数据是不共享的，也就是每个组件中的mixin实例都是不一样的，都是单独存在的个体，不存在相互影响的；
  2. mixin可以定义公用的变量或方法，但是mixin中的数据是不共享的，也就是每个组件中的mixin实例都是不一样的，都是单独存在的个体，不存在相互影响的；

六、常用mixin

下面是我项目里面封装的常用的一些列表mixin方法:
其中包含获取列表数据、列表查询、列表重置、分页、筛选变化时触发、排序变化时触发、折叠、新增、删除、编辑、导出入excel等方法

export const ListMixin = {
  data() {
    return {
      // 公用接口
      api: {
        getNewId: 'commonRest/getNewId',
      },
      /* table加载状态 */
      loading: false,
      /* 分页参数 */
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        pageSizeOptions: [10, 20, 30, 50, 100],
        showQuickJumper: true,
        showSizeChanger: true,
      },
      // 查询参数
      searchForm: {},
      /* 排序参数 */
      sorter: {
        sortColumn: '',
        isAsc: '',
      },
      /* 查询折叠 */
      toggleSearchStatus: false,
      /* 数据源 */
      tableData: [],
      // 展开收起
      folding: false,
      //列表页面查询条件默认宽度
      searchCol: {
        lg: 6, md: 12, sm: 24,
      },
      ExportXlsLoading: false,
    }
  },
  created() {
    if (this.$route.query.parameter) {
      var parameter = JSON.parse(this.$route.query.parameter)
      for (let items in parameter) {
        this.searchForm[items] = parameter[items]
      }
    }
    this.loadData()
  },
  methods: {
    // 获取列表数据
    loadData(arg) {
      return new Promise((resolve, error) => {
        if (this.url !== undefined && this.url.list !== undefined &&
          this.url.list !== '') {
          //加载数据 若传入参数1则加载第一页的内容
          if (arg === 1) {
            this.pagination.current = 1
          }
          this.loading = true
          this.$axios.getAction(
            this.url.list,
            {
              ...this.searchForm,
              ...this.sorter,
              current: this.pagination.current,
              size: this.pagination.pageSize,
            }
          ).then(res => {
            this.pagination.total = res.obj.total
            this.tableData = res.obj.records
            resolve(true)
          }).finally(() => this.loading = false)
        }
      })

    },
    // 列表查询
    handleSearch(event) {
      this.loadData(1)
    },
    // 列表重置
    handleReset() {
      this.searchForm = {
        sysCode: sessionStorage.getItem('sysCode')
      }
      this.pagination.current = 1
      this.loadData()
    },
    //分页、筛选变化时触发
    handlePageChange({ pageSize, current }) {
      this.pagination.current = current
      this.pagination.size = pageSize
      this.loadData()
    },
    //排序变化时触发
    handleSortChange({ prop, order }) {
      let isAsc = order === 'ascending' ? true : false
      this.sorter.sortColumn = prop
      this.sorter.isAsc = isAsc
      this.loadData()
    },
    //折叠
    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus
    },
    // 新增
    handleAdd() {
      this.$refs.modalForm.add()
      this.$refs.modalForm.title = '新增'
      this.$refs.modalForm.visible = true
    },
    addWithId(param) {
      //取消选中效果
      this.$refs.singleTable.setCurrentRow()
      this.$axios.getAction('commonRest/getNewId').then(res => {
        const newData = {
          id: 'new' + res,
          ...param
        }
        this.$refs.modalForm.add(newData)
        this.$refs.modalForm.title = '新增'
        this.$refs.modalForm.visible = true
      })
    },
    // 编辑
    handleEdit(record) {
      this.$refs.modalForm.edit({ ...record })
      this.$refs.modalForm.title = '编辑'
      this.$refs.modalForm.visible = true
    },
    // 编辑
    editById(id) {
      this.$refs.modalForm.queryById(id).then(() => {
        this.$refs.modalForm.title = '编辑'
        this.$refs.modalForm.visible = true
        this.$refs.modalForm.disabled = false
      })
    },
    // 查看
    handleView(record) {
      this.$refs.modalForm.edit({ ...record })
      this.$refs.modalForm.title = '查看'
      this.$refs.modalForm.visible = true
      this.$refs.modalForm.disabled = true
    },
    // 查看
    viewById(id) {
      this.$refs.modalForm.queryById(id).then(() => {
        this.$refs.modalForm.title = '查看'
        this.$refs.modalForm.visible = true
        this.$refs.modalForm.disabled = true
      })
    },
    // 删除
    handleDel(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$axios.deleteAction(this.url.del, {
          id: id,
        }).then(res => {
          if (res.result) {
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
          this.loadData()
        })
      })
    },
    handleStatusChange(row) {
      this.$confirm('您确定要修改状态?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$axios.putForm(this.url.updateStatus, {
          id: row.id,
          isValid: !row.isValid,
          version: row.version,
        }).then(res => {
          if (res.result) {
            this.$message.success(res.msg)
            row.isValid = !row.isValid
            this.loadData()
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    },
    //导出excel
    handleExportXls(fileName) {
      this.ExportXlsLoading = true
      return new Promise(async (resolve, reject) => {
        if (!fileName || typeof fileName != "string") {
          fileName = "导出文件"
        }
        let param = { ...this.searchForm, ...this.sorter, };
        if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
          param['selections'] = this.selectedRowKeys.join(",")
        }
        this.$axios.downFile(this.url.exportXls, param).then(data => {
          if (!data) {
            this.$message.warning("文件下载失败")
            reject()
            return
          }
          if (typeof window.navigator.msSaveBlob !== 'undefined') {
            window.navigator.msSaveBlob(new Blob([data]), fileName + '.xls')
          } else {
            let url = window.URL.createObjectURL(new Blob([data]))
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', fileName + '.xlsx')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link); //下载完成移除元素
            window.URL.revokeObjectURL(url); //释放掉blob对象
            resolve()
          }
          this.ExportXlsLoading = false
        })
      })

    },
    //导入excel
    handleUploadXls() {
      this.$refs.uploadExcelDialog.visible = true
    }
  },
}

以及封装的我项目里面常用的CRUD表单mixin方法：

import { mapState } from 'vuex'

export const FormMixin = {
  computed: {
    ...mapState({
      drawerSize: state => state.themeModule.drawerSize,//使用ES6的箭头函数来给count赋值
      dialogSize: state => state.themeModule.dialogSize,//使用ES6的箭头函数来给count赋值
      labelPosition: state => state.themeModule.labelPosition,//使用ES6的箭头函数来给count赋值
      deviceType: state => state.themeModule.deviceType,//使用ES6的箭头函数来给count赋值
    }),
  },
  data () {
    return {
      model: {},
      initModel: {},//默认值
      confirmLoading: false,
      title: '',
      visible: false,
      disabled: false,
      ueConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 400,
        // 初始容器宽度
        initialFrameWidth: '100%',
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        // serverUrl: 'http://35.201.165.105:8000/controller.php',
        serverUrl: `${this.$global.API}ueditor`,
        // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
        UEDITOR_HOME_URL: '/UEditor/',
      },
      autoAdaptive: {
        lg: 8, md: 12, sm: 24,
        // lg: 6, md: 12, sm: 24,
        // lg: 12, md: 12, sm: 24,
      },
    }
  },
  created() {
    let obj = JSON.parse(JSON.stringify(this.initModel))
    this.model = { ...obj }
  },
  methods: {
    add (newData) {
      this.disabled = false
      if (newData) {
        //考虑新增时候model中会有默认初始值
        // this.model =newData;
        let obj = {};
        obj = JSON.parse(JSON.stringify(this.initModel))
        this.model = { ...obj, ...newData }
      }
    },
    edit (record) {
      this.disabled = false
      this.model = record
    },
    queryById (id) {
      return new Promise((resolve) => {
        if (this.url !== undefined && this.url.queryById !== undefined &&
          this.url.queryById !== '') {
          this.$axios.getAction(this.url.queryById, { id: id }).then(res => {
            resolve(res)
            if (res.result) {
              this.model = res.obj

            } else {
              this.$message.error(res.msg)
            }
          }).finally(() => {
            resolve()
          })
        } else {
          resolve()
        }
      })
    },
    save () {
      if(this.model.cardNo && this.model.cardNo.length < 10){
        this.model.cardNo = '0'.repeat(10 - this.model.cardNo.length) + this.model.cardNo;
      }
      if (this.url !== undefined && this.url.save !== undefined && this.url.save !== '') {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            this.confirmLoading = true
            this.$axios.postAction(this.url.save, this.model).then(res => {
              if (res.result) {
                this.$message.success(res.msg)
                this.$emit('ok')
                this.handleClose()
              } else {
                this.$message.error(res.msg)
              }
            }).finally(() => {
              //弹窗动画时间
              setTimeout(() => {
                this.confirmLoading = false
              }, 301)
            })
          }
        })
      }
    },
    // 关闭弹框
    handleClose () {
      this.$emit('close')
      this.visible = false
      this.model = {id:'',...this.initModel}
      if (this.$refs.ruleForm !== undefined) {
        this.$refs.ruleForm.clearValidate()
      }
    },
  },
}

圈圈的熊
关注
专栏目录
Vue mixin混入（混合）配置学习
06-09
下面将详细探讨Vue mixin混入配置的学习，包括其工作原理、使用场景、优点以及如何在实际项目中应用。 **1. 工作原理** Vue mixin 混入允许开发者定义一组属性，包括选项如数据、方法、生命周期钩子等，然后这些...
vue 混入 相同的对象，钩子的合并规则
月光恋九霄的博客
02-24 836
当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。 比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。 const myMixin = { data() { return { message: 'hello', foo: 'abc' } } } const app = Vue.createApp({ mixins: [myMixin], data() { return { message:
vue 混入（mixin）的使用
weixin_44690156的博客
07-25 8278
当组件使用了mixin时,mixin中的生命周期函数会先执行,然后在执行组件中的生命周期。mixin对象里的(components、methods、computed、data)这些选项，混入组件时选项会被合并，重名冲突时优先采用组件中定义的数据。mixin中定义的方法和参数在各组件中不共享，即当前组件对mixins的属性的修改，其他也引用了这个mixins的组件不会受影响;mixin中定义的生命周期函数会比引用组件的生命周期先执行,会和组件中定义的methods,created等选项合并调用;...
Vue 高级篇之什么是 Mixin
最新发布
qq_46422994的博客
10-08 955
Mixin 是一种设计模式，允许将可复用的代码片段混合到多个 Vue 组件中。通过 Mixin，我们可以将一些逻辑、数据和方法提取出来，并在多个组件中共享它们。这使得我们能够在不同的组件中复用代码，而不必在每个组件中重复相同的实现。我们可以通过一个普通的 JavaScript 对象来定义 Mixin。
【Vue】Vue中mixins的使用方法及实际项目应用详解
一只洒鹿
12-09 7061
注意一下 vue 中 mixins 的优先级，component > mixins > extends。我们暂且将 mixins 称作是组件模块化，灵活运用组件模块化，可以将组件内的重复代码提取出来，实现代码复用，也使我们的代码更加清晰，效率也大大提高。
Vue中mixin的使用
qq_44621394的博客
09-03 967
混入通过注入配置项到vue实例用来提升复用性除了使用上述默认的合并规则,还可以通过Vue.config.optionMergeStrategies自定义合并规则。//返回合并的值};通常对于值为对象的属性我们可以借用已有的合并规则//借用methods的规则mixin混入通过注入配置项到vue实例提升复用性属性冲突时以组件内的属性为准,声明周期的钩子会保留多个。
Vue中混入（mixin）的使用
qq_44962364的博客
08-25 2063
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
Vue中mixin的使用方法
m0_56219678的博客
02-02 3414
vue中mixin使用方法
mixin混入来封装axios请求
01-03
mixin混入来封装axios请求 我们通过mixin来封装axios请求这样每一个组件直接通过混入来进行axios请求。 不必每次需要时都要import引入一次 首先需要下载axios的包 //用npm、cnpm或者yarn都行 npm install axios ...
19-Mixin混入.ts
03-06
19-Mixin混入
19-Mixin混入.js
03-06
19-Mixin混入
小程序mixin混入Page选项合并
08-10
在微信小程序的开发中，`mixin` 是一种常见的代码复用机制，它允许开发者定义一组通用的方法或者属性，然后将这些通用部分混入（mix in）到不同的页面（Page）或组件（Component）中，避免了代码重复，提高了代码的...
Vue 混入（Mixin） 的使用方法及使用场景总结
weixin_51080551的博客
07-16 412
vue Mixin 的使用
vue之mixin理解与使用
qq_53335793的博客
08-17 64
关于Vue中minxins的使用
Vue中的混入mixin使用方法介绍
热爱前端的大三在校生
10-28 1867
数据对象进行合并，其中的基本数据类型在和组件的数据发生冲突时以组件数据优先，组件中的数据会覆盖混入对象的数据。数据对象中如果有引用数据类型，引用数据类型会进行深参差的递归合并。生命周期钩子函数混合为一个数组，当使用组件时，组件的函数和混和的函数都执行，混入中的函数会先执行，组件的函数后执行。值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。一般混入都是在单组件内应用比较合适也可以进行全局注册。
Vue项目实战08 ： vue之mixin理解与使用
达拉崩巴斑得贝迪卜多比鲁翁_
10-26 1476
官网查看： 混入 基础 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 例子： // 定义一个混入对象 var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from
Vue 混入（mixin）详细介绍（可复用性、全局混入）
2401_84150137的博客
04-13 1615
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
Vue.mixin 的使用场景和原理
My_wife_QBL的博客
07-02 880
Vue.mixin 是 Vue.js 提供的一种全局混入功能，可以将一些通用的逻辑注入到多个组件中。通过 mixin，可以在多个组件中共享数据、方法、生命周期钩子等，而无需重复代码。每个组件在创建时都会自动“混入”这些逻辑，从而实现代码复用和逻辑共享。
小程序中购物车的mixin混入
07-11
小程序中购物车的mixin混入是一种将购物车相关的逻辑和功能模块化的方式。通过使用mixin混入，可以将购物车的功能代码独立于其他组件，使得代码更加可维护和可复用。 具体实现时，可以创建一个购物车的mixin对象，将购物车相关的方法和数据定义在这个对象中。然后，在需要使用购物车功能的页面或组件中，通过引入这个mixin对象，并在组件的mixins属性中声明使用该mixin，即可将购物车的功能注入到组件中。 举个例子，假设有一个名为cartMixin的购物车mixin对象，其中定义了添加商品、删除商品、计算总价等方法。在需要使用购物车功能的页面或组件中，可以这样使用： ```javascript import cartMixin from 'path/to/cartMixin'; Page({ mixins: [cartMixin], // ... }); ``` 这样，页面或组件就可以直接使用cartMixin中定义的方法，如this.addProduct()、this.removeProduct()等，来实现购物车相关的功能。 通过使用mixin混入，可以避免在多个页面或组件中重复编写相同的购物车逻辑，提高代码复用性和开发效率。同时，由于购物车逻辑被封装在独立的mixin对象中，也方便了后续对购物车功能的维护和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值