在使用vue3 setup语法糖同时使用mixins
setup语法糖使用mixins
·
利用setup语法糖和普通script能同时使用,并且普通的script setup的写法可以兼容vue2的写法去实现。
代码实现如下:
// a文件
<template>
<div>{{bb}}</div>
<button @click="aa"></button>
</template>
<script setup lang="ts">
// 这里省略,根据自己的需求去填写
</script>
<script lang="ts">
import mixins from './mixins'
export default {
mixins: [mixins]
}
</script>
// mixins.js
export default {
data() {
return {
bb: 'bbbbbb'
}
},
methods: {
aa() {
console.log('aa');
}
}
}
注意:这里需要注意的因为我使用的ts,所以普通script和setup语法糖都需要是同一语言类型,也就是要都要声明lang="ts"。
缺点:好像无法在mixins里使用setup语法糖里使用的defineProps和defineEmits,因为这两个只能在setup语法糖使用,是编译器宏,是不需要导入的。
另外一提,setup语法糖和带有src属性的script一起共用。
更多推荐
已为社区贡献6条内容
所有评论(0)