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

简介

要使vue支持ts写法,我们需要用到vue-property-decorator,这个组件完全依赖于vue-class-componet

安装 vue-property-decorator

npm install vue-property-decorator
  • 安装成功之后我们新建HelloWorld.vue
<template>
<div class="hello">
Hello World
</div>
</template> <script lang="ts">
import { Component, Vue } from 'vue-property-decorator'; @Component
export default class HelloWorld extends Vue {
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>

配置好路由 就可以直接访问

装饰器和函数

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

用法

@Component

@Component(options: ComponentOptions = {}) 装饰器

// options 对象参数可以是
name: 'TsDemo',
components:{},
computed:{},
props:{},
watch: {},
filters: {},
// 等

@Emit

@Inject

@Provice

@Prop

@Watch

  • @Watch(path: stirng, options: WatchOptions = {}) 装饰器
//简单使用
private num: number = 0;
@Watch('num')
numChange(newVal: number, oldVal: number) {
console.log(newVal, oldVal)
}
private obj: Obj = {
name: '1',
one: {
name: '2'
}
}
// 深度监听
@Watch('obj', {deep: true, immediate: true})
objChange(newVal: Obj, oldVal: Obj) {
console.log(newVal, oldVal);
}
// 监听对象中的一个属性值
@Watch('obj.name')
objNameChange(newVal: Obj, oldVal: Obj) {
console.log(newVal, oldVal);
} private arr: number[] = [];
@Watch('arr', {deep: true})
arrChange(newVal: number[], oldVal: number[]) {
console.log('数组变化', newVal, oldVal);
}
// 直接通过数组索引修改,不能监听,解决办法 this.$set(array, index, value);
// this.arr[0] = Math.random() * 10;
// this.$set(this.arr, 0, Math.random() * 10)
  • 小结:

    1、数组,改变数组的值用Vue的$set方法,改变数组的长度用数组的splice方法使数组变化变成可监听的。

    2、对象。如果操作的属性是对象内已经有的值,使用$watch,加上关键字deep深度监听对象,如果操作的属性是对象内没有的新属性。使用$set使对象变成可监听!

@Model

Mixins

@Ref

// - 在 vue-property-decorator 中 访问子组件方法可以使用
this.$refs.UserMessageComponent.list;
// 直接使用 this 调用,会出现以下错误
// Property 'list' does not exist on type 'Vue | Element | (Vue | Element)[]'.
// Property 'list' does not exist on type 'Vue'. // 解决办法 第一种方式
(this as any).$refs.UserMessageComponent.list;
(this as any).$refs.UserMessageComponent.del();
// (<UserMessage>this.$refs.UserMessageComponent).del(); 子组件中属性和方法 访问权限 public
// 第二种方式
private son: any = null // 存储 this.$refs.UserMessageComponent
this.son = this.$refs.UserMessageComponent;
this.son.list;
this.son.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>
  • vur-router 使用
  • vuex 使用

    持续更新中。。。

使用 vue-property-decorator 用法总结的更多相关文章

  1. Vue slot 插槽用法:自定义列表组件

    Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...

  2. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  3. 聊聊属性方法property的用法

    写之前随便百度了一下博客,又看到廖雪峰的博客了.果然置顶的能力很强. 我想说其实property的用法并不是主要用来做类型检查.反而更多应该是用于简化操作的目的. 写之前想聊一个古老的话题.年初的时候 ...

  4. checkbox在vue中的用法小结

    关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插 ...

  5. checkbox在vue中的用法总结

    前言 关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样, 之前对于 ...

  6. python基础学习 Day19 面向对象的三大特性之多态、封装 property的用法(1)

    一.课前内容回顾 继承作用:提高代码的重用性(要继承父类的子类都实现相同的方法:抽象类.接口) 继承解释:当你开始编写两个类的时候,出现了重复的代码,通过继承来简化代码,把重复的代码放在父类中. 单继 ...

  7. Property 'validate' does not exist on type 'Element | Element[] | Vue | Vue[]'. Property 'valid...

    使用vue-cli 3.0+Element-ui时候,调用form表单校验时候出现的问题是: Property 'validate' does not exist on type 'Element | ...

  8. Vue SSR: 基本用法 (二)

    上一篇讲解了ssr的原理,这篇主要讲基本用法: 1.安装 npm install vue vue-server-renderer --save 我们将在整个指南中使用 NPM,但你也可以使用 Yarn ...

  9. python property的用法

    用法一: class Test(object): def __init__(self): # 私有化 self.__num = 100 #名字重整_Test__num def setNum(self, ...

  10. cdn模式下vue的基本用法

    我们知道jq是简化了dom操作,而react和vue则是通过使用虚拟dom的方式,不需要频繁的更改ui界面,而是通过更改数据的方式来更新界面. 我们知道些jq插件时会在IFFE中传入jQuery,jQ ...

随机推荐

  1. Java Filter型内存马的学习与实践

    完全参考:https://www.cnblogs.com/nice0e3/p/14622879.html 这篇笔记,来源逗神的指点,让我去了解了内存马,这篇笔记记录的是filter类型的内存马 内存马 ...

  2. TX-LCN分布式事务之LCN模式

    什么是LCN模式 LCN模式是TX-LCN分布式事务模式的一种,L-lock-锁定事务单元.C-confirm-确认事务模块状态. notify-通知事务单元 原理 LCN模式是通过Spring AO ...

  3. Scrum Meeting 0522

    零.说明 日期:2021-5-22 任务:简要汇报两日内已完成任务,计划后两日完成任务 备注:由于在Beta冲刺阶段的最后一周中团队成员需要准备必修课程计算机网络的相关考试,所以为了保证Beta功能的 ...

  4. [no_code][Beta]项目展示博客

    $( "#cnblogs_post_body" ).catalog() 团队项目链接 Beta阶段核心开发点: github 前端 github 后端 github OCR文档-含 ...

  5. 热身训练2 Another Meaning

    题目来源 简要题意: 众所周知,在许多情况下,一个词语有两种意思.比如"hehe",不仅意味着"hehe",还意味着"excuse me". ...

  6. qgis cookbook-QgsMapRendererJob学习

    学习到渲染(QgsMapRendererJob),按照教程所讲总是输出不了图像,看了一下qgis的测试源码,发现少了一句话,加上后就可以输出了! from qgis.core import * fro ...

  7. C语言单片机项目实战超声波雷达测距

    本实验是基于MSP430利用HC-SR04超声波传感器进行测距,测距范围是3-65cm,讲得到的数据显示在LCD 1602液晶屏上. 模块工作原理如下 (1)采用 IO 触发测距,给至少 10us 的 ...

  8. Python课程笔记(六)

    今天上课补上了上次未学完比较重点的鼠标和键盘事件,同时开始学习运用turtle进行绘图. 本次课程的代码: https://gitee.com/wang_ming_er/python_course_l ...

  9. js fetch异步请求使用详解

    目录 认识异步 fetch(url) response.json() 结合async和await 异常处理 post请求 认识异步 首先我们得明白请求是一个异步的过程. 因为请求需要时间向服务器发送请 ...

  10. 转:bash shell 语法1

    1 Shell介绍 Shell的作用是解释执行用户的命令,用户输入一条命令,Shell就解释执行一条,这种方式称为交互式(Interactive),Shell还有一种执行命令的方式称为批处理(Batc ...