Typescript中如何使用一些Vue的属性

最新推荐文章于 2024-06-01 23:22:58 发布

吴小川_Bowden

最新推荐文章于 2024-06-01 23:22:58 发布

阅读量307

点赞数

文章标签： typescript

本文链接：https://blog.csdn.net/qq_39192395/article/details/118176060

版权

这篇博客介绍了在Vue中结合TypeScript如何使用@Component装饰器创建组件，通过@Prop接收父组件传递的值，利用@Watch监听数据变化，以及运用计算属性getter和setter。还展示了如何导入并使用其他组件，以及使用@Emit触发事件。此外，文章提到了混入（mixins）的概念，并展示了如何实现。

摘要由CSDN通过智能技术生成

Typescript中如何使用一些Vue的属性

vue-property-decorator 需要安装

npm i -S vue-property-decorator

@Component (组件)

import Vue from "vue";
import { Component} from "vue-property-decorator";

@Component
export default class Tabs extends Vue {
//内容
}

传入的组件

<template>
    <Numberpad />
    <Notes />
    <Tags />
    <Tabs />
</template> 

<script lang="ts">
import Vue from "vue";
import Numberpad from "@/components/Money/Numberpad.vue";
import Notes from "@/components/Money/Notes.vue";
import Tags from "@/components/Money/Tags.vue";
import { Component } from "vue-property-decorator";
import Tabs from "@/components/Tabs.vue";

@Component({
  components: { Numberpad, Notes, Tags, Tabs }
})
export default class Money extends Vue {
//内容
}
</script>

computed 的 getter & setter

@Component
export default class HelloDecorator extends Vue {
    count: number = 123
 
    // 获取计算属性
    get total(): number {
      return this.count + 1
    }
 
    // 设置计算属性
    set total(param:number): void {
      this.count = param
    }
}

@Prop (父子组件传值)

父组件：

<Tabs :data-source="typeList" :value.sync="record.type" />

子组件：

import Vue from "vue";
import { Prop，Component } from "vue-property-decorator";

@Component
export default class Tabs extends Vue {
  @Prop({ required: true, type: Array })
  dataSource!: DataSourceItem[];
  @Prop(String) readonly value!: string;
//内容
}

@Prop()里面需要写你传的参数的类型，在参数后面也要写

readonly 是让参数变为只读，不想让其修改

在传的参数后面加！或者？是为了告诉Ts 可能没有这个参数，防止初始化报错

@Watch(侦听数值变化)

import Vue from "vue";
import {  Component, Watch } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
  @Watch('child')
  onChildChanged(val: string, oldVal: string) {
//内容
}
 @Watch('xxx')
  onChildChanged(val: string, oldVal: string) {
//内容
}
}

@Watch()括号里面是被侦听的属性，括号下面就是发生变化时执行的函数，这函数有2个参数，一个是旧的值一个是新的值

@Emit

父组件：

<componentA @change='handelChange'></componentA>
 
import { Vue, Component } from 'vue-property-decorator';
@Component({
    name: 'ParentCom',
    components: {}
})
export default class ParentCom extends Vue {
    handelChange(): void {
        console.log('子组件改变了');
    }
}

子组件：componentA

import { Vue, Component, Emit } from 'vue-property-decorator';
@Component({
    name: 'ComponentB',
    components: {}
})
export default class ComponentB extends Vue {
    @Emit('change')
    doChange() {
        return '';
    }
    created() {
        this.doChange();
    }
}

mixins (混入)

这个需要用到vue-class-component

混入的组件

import Vue from "vue";
import Component from "vue-class-component"; // 这里最好用vue-class-component的Component 

@Component
export class TagHelper extends Vue {
//内容
}
export default TagHelper;

被混入的组件

import Vue from "vue";
import { Component } from "vue-property-decorator";
import { mixins } from "vue-class-component";
import TagHelper from "@/mixins/TagHelper"; //导入

@Component
export default class Tags extends mixins(TagHelper) { 
//内容
}