• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

使用 vue-property-decorator 用法总结

开发技术 开发技术 3小时前 3次浏览

Vue + TypeScript 使用 vue-property-decorator 用法总结

简介

属性

@Component (完全继承于vue-class-component)
@Emit
@Inject
@Provice
@Prop
@Watch
@Model
Mixins (在vue-class-component中定义);
@Ref

用法

@Component

@Emit

@Inject

@Provice

@Prop

@Watch

@Model

Mixins

@Ref

// - 在 vue-property-decorator 中 访问子组件方法可以使用
// Property 'list' does not exist on type 'Vue | Element | (Vue | Element)[]'.
// Property 'list' does not exist on type 'Vue'.
this.$refs.UserMessageComponent.list;
// 解决办法
(this as any).$refs.UserMessageComponent.list;
(this as any).$refs.UserMessageComponent.del();
// 也可以使用 @Ref 代替

@Ref 装饰器接收一个可选择参数,用来指向元素或者子组件引用信息。如果没有提供参数,会使用装饰器后面的属性名作为参数

@Ref(refkey?: string) 参数!: 参数类型;

新建文件index.vue 和 userMessage.vue 两个文件

// userMessage.vue
<template>
  <div class="add_form">
    子组件
  </div>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch} from "vue-property-decorator";

@Component
export default class UserMessage extends Vue{
    private livePlatList = [];
    public list: string = '子组件';

    private add(): void {
        console.log('------- add -------');
    }
    publice del(): void {
        console.log('------ del -------');
    }
}
</script>

<style lang="scss" scoped>
@import "index";
</style>


新建 index.vue

// userMessage.vue
<template>
  <div class="add_form">
    父组件组件
    <UserMessage ref='UserMessageComponent'></UserMessage>
    <button @click="handleChildFun">访问子组件</button>
    <button @click="addFormFun" ref="refC">测试ref</button>
  </div>
</template>

<script lang="ts">
import {Component, Vue, Ref} from "vue-property-decorator";
import UserMessage from 'userMessage.vue';
@Component({
    components: {
        UserMessage
    }
})
export default class Index extends Vue{
    // @Ref(refkey?: string) 参数!: 参数类型; 以下两种方式都指向 ref="UserMessageComponent" 元素或子组件
    @Ref() UserMessageComponent!: UserMessageComponent;
    @Ref('UserMessageComponent') UserMessageComponentTow!: UserMessageComponent;

    @Ref() readonly refC!: HTMLButtonElement;
    private handleChildFun(): void {
        this.UserMessageComponent.del();
        this.UserMessageComponent.list;

        this.UserMessageComponent.livePlatList; // Property 'blivePlatList' is private and only accessible within class 'UserMessage'.

        this.refC.innerHTML // this.refC 为button 元素,测试ref
    }

}
</script>

<style lang="scss" scoped>
</style>

持续更新中。。。


程序员灯塔
转载请注明原文链接:使用 vue-property-decorator 用法总结
喜欢 (0)