Vue3之Mixin的使用方式(全局,局部,setup内部使用)
更新时间：2023年10月09日 09:20:31 作者：窗外鸟不停
这篇文章主要介绍了Vue3之Mixin的使用方式(全局,局部,setup内部使用),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Mixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。
一个 mixin 对象可以包含任意组件选项。
当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项
1.查看了官方代码
记录下了自己的Mixin写法
2.新建一个文件夹用于minix
添加2方法用于混合器
3.在main中引用全局方法
4.在局部引用mixin
代码：
<template>
<div>
<el-button @click="test1">全局的Minix</el-button>
<el-button @click="test2('使用了局部mixin')">局部的Minx</el-button>
<el-button @click="onTest">setup内部使用</el-button>
</div>
</template>
<script>
import { getCurrentInstance } from 'vue'
import { common } from '../minix/index.js'
export default {
name: 'Test2',
mixins: [common],
setup() {
const { proxy } = getCurrentInstance()
const onTest = () => {
proxy.test2("setup内部使用Minx")
}
return {
onTest
}
}
}
</script>测试效果成功
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要和大家一起深入探讨Vue.js组件和组件通信的相关资料，感兴趣的小伙伴们可以参考一下2016-09-09
项目开发中因为ui设计常常需要修改vue常用的组件库（element,antD等等）,这就需要用到样式穿透,下面这篇文章主要给大家介绍了关于Vue3样式渗透之deep()为什么无效的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了解决运行vue项目内存溢出问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家详细介绍了vue实现分页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了Vue中的echarts图表如何实现loading效果，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
今天小编就为大家分享一篇vue 组件的封装之基于axios的ajax请求方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
Vue项目开发中,遇到界面下载功能时,前端如何实现将后端返回二进制文件在浏览器自动下载呢,本文就来和大家聊聊具体的解决方法吧2024-11-11
vue项目有时候需要根据页面需要动态的去修改页面标题名称，本文就来介绍一下，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
这篇文章主要介绍了vue2配置scss的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
这篇文章主要介绍了解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论