[Vue + TS] Create your own Decorators in Vue with TypeScript
Vuetypescript in with create your TS Own
2023-09-14 09:00:51 时间
We’ve used @Watch, @Inject and more decorators from vue-property-decorator. In this lesson however we will guide you through creating your own decorators in order to add common functionality to your Vue components using TypeScript.
Import:
import {createDecorator} from 'vue-class-component'
Define a decorator:
const Log = (msg) => { return createDecorator((component, key) => { console.log("#Component", component); console.log("#Key", key); //log console.log("#Msg", msg); //App }) }
Using it:
@Log('fullMessage get called') get fullMessage() { return `${this.message} from Typescript` }
Output:
#Component Object {directives: Object, components: Object, name: "Hello", methods: Object, computed: Object…}
#Key fullMessage
#Msg fullMessage get called
相关文章
- Vue+ElementUI项目使用webpack输出MPA【华为云分享】
- vue父组件传字符串到子组件不需要写 v-bind 绑定或语法糖 :
- vue-导入静态文件
- [Typescript] 88. Hard - Simple Vue
- [Vue + TS] Use Properties in Vue Components Using @Prop Decorator with TypeScript
- [Vue + TS] Create Type-Safe Vue Directives in TypeScript
- [Vue + TS] Write a Vue Component as a Class in TypeScript
- vue.js3:分割图片为四宫格九宫格等形式(vue@3.2.37)
- vue.js3: 多张图片合并(vue@3.2.37)
- vue.js3:文本对比或比较(codemirror@5.65.5 / vue@3.2.37)
- 如何给一个vue项目重命名(vue.js 3.2.4)
- 前端实操案例丨如何实现JS向Vue传值
- vue3.0 配置 vue.config.js
- vue中,选中多个选项,并且使其高亮
- Vue+TS/Typescript:Property does not exist on type ‘(() => any) | ComputedOptions<any>‘
- 前端框架Vue------>第一天学习(2) v-if
- 200:vue+openlayers 添加删除多边形,modify feature,双向互动颜色显示
- vue父组件传值和子组件触发父组件方法
- 【vue】vue中如何实现组件封装、组件化开发及组件间传参_08
- 【vue】vue自定义指令、计算属性、过滤器_06
- ant-design-vue中a-table列表数据根据点击的表头进行升/降排序