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项目中使用flow做类型检测的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要为大家详细介绍了vue实现三级联动动态菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了vuejs2.0 select动态绑定下拉框 ，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
在本篇文章里小编给各位整理了关于django中使用vue.js需要注意的地方以及相关知识点，需要的朋友们跟着学习参考下。2019-07-07
computed是vue的配置选项,它的值是一个对象,其中可定义多个计算属性,每个计算属性就是一个函数,下面这篇文章主要给大家介绍了关于vue中计算属性computed的详细讲解,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue 实例方法和数据的相关资料，非常不错，具有参考借鉴价值,需要的朋友可以参考下2017-10-10
本篇文章主要介绍了vue之页面缓存问题(基于2.0)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
Vue Router路由hash模式与history模式详细介绍
Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转2022-08-08
这篇文章主要为大家介绍了vue框架编辑接口页面实现下拉级联选择以及绑定接口所属模块，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-05-05
本文主要介绍了vue3+webpack中npm发布组件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-01-01
最新评论