Vue3之Mixin的使用方式(全局,局部,setup内部使用)
作者：窗外鸟不停
这篇文章主要介绍了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>测试效果成功
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。