Vue3 vite通过2个script标签实现快捷导入mixins,并通过mixins获取页面定义方法函数(菜鸟学徒–文学而)
之前一直使用的vue2,初学vue3使用mixins发现通过setup导入mixins的方式有些麻烦,网络上百度方法大部分导入mixins还需要额外导入mixins中的方法,使用规范上可能不太规范但是适用,本菜鸟根据网上方法结合后mixins不需要额外导入方法为:
1.创建自己的mixins.js (mymixins.js)
import {getCurrentInstance} from ‘vue’//用于获取页面变量方法
export const MyMixin = {
data() {
return {
mixintxt: 'mixins中的数据'
getcurrent:getCurrentInstance()//这一行必须要,不然没办法获取
}
},
methods: {
DiaLog() {
console.log('测试')
console.log('mixins中打印该mixins的data定义的变量仍然使用this', this.mixintxt)//用于获取页面变量方法
console.log('打印页面定义的数据',this.getcurrent.setupState.vuetxt)
this.getcurrent.setupState.VueFun()//本菜鸟并不确定这样是否符合规范,但是实现了我需要的效果
}
}
}
在这里插入代码片
//不想分别创建多个mixins文件,可用此方法创建多个
export const MyMixin2 = {
data() {
return {
mixintxt2: 'mixins2中的数据'
}
},
methods: {
DiaLog2() {
console.log('测试2')
}
}
}
2.在vue3的vue文件中【注意先后顺序,setup语法糖的在后面】
<script>
import { MyMixin } from '../mixin/mymixins'//导入你想要使用的mixins
export default {
mixins: [MyMixin]
}
</script>
<script setup>
const { proxy } = getCurrentInstance()//此方法具体文档请自行百度
const vuetxt=ref('页面中定义的变量')
const VueFun=()=>{
console.log('页面中定义的方法')
}
const ToAxios = () => {//页面上的点击事件,不详细描述
proxy.DiaLog()//执行mixins中的方法
console.log(proxy.mixintxt)//查看mixins中定义的变量
proxy.mixintxt = '修改后'
console.log(proxy.mixintxt)//同vue2中修改mixins中变量的方法一样
}
</script>
另外
如果是用的另外一种形式的mixins,则只需要这么做
1.mixins文件
import {getCurrentInstance} from ‘vue’//用于获取页面变量方法
export const IndexMixins2=()=>{
const _this=getCurrentInstance()
const mixinsFun=()={
_this.setupState.VueFun()
consoel.log(_this.setupState.vuetxt)
}
return { mixinsFun }
}
2.在vue中
<script setup>
import {IndexMixins2} from 'mixins文件路径'
const {mixinsFun}=IndexMixins2()
const vuetxt=ref('页面中定义的变量')
const VueFun=()=>{
console.log('页面中定义的方法')
}
onMounted(()=>{
mixinsFun()
})
</script>