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. javascript-jquery-文档处理

    一.移动元素 1.append():向每个匹配元素的内部追加内容.例如:$("选择器1").qppend("选择器2"):将会匹配选择器2的元素,移动到匹配选择 ...

  2. spring session实现session统一管理(jdbc实现)

    最近在看一些关于spring session 的知识,特做一个笔记记录一下. 在项目中经常会遇到这么一种情况,同一个web项目有时需要部署多份,然后使用nginx实现负载均衡,那么遇到的问题就是,部署 ...

  3. 用python检查矩阵的计算

    鉴于最近复习线性代数计算量较大,且1800答案常常忽略一些逆阵.行列式的计算答案,故用Python写出矩阵的简单计算程序,便于检查出错的步骤. 1.行列式 可自行更改阶数 from numpy imp ...

  4. n阶行列式计算

    1.化为上下三角 该类型的矩阵.行列式在之前写过(https://www.cnblogs.com/wangzheming35/p/12906624.html),也建议记住这个行列式的结论. 当然不仅仅 ...

  5. 对JavaScript中局部变量、全局变量和闭包的理解

    对js中局部变量.全局变量和闭包的理解 局部变量 对于局部变量,js给出的定义是这样的:在 JavaScript函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它.(该变量的作用域 ...

  6. OpenWrt编译问题记录

    错误一.config.status: error: cannot find input file: `xmetadataretriever/Makefile.in' configure: creati ...

  7. oracle 修改表空间名

    1.登录使用sys用户登录 sqlplus sys/ as sysdba 2.修改表空间名字 SQL> alter tablespace 旧表空间名 rename to 新表空间名; 表空间已更 ...

  8. k8s入坑之路(7)kubernetes设计精髓List/Watch机制和Informer模块详解

    1.list-watch是什么 List-watch 是 K8S 统一的异步消息处理机制,保证了消息的实时性,可靠性,顺序性,性能等等,为声明式风格的API 奠定了良好的基础,它是优雅的通信方式,是 ...

  9. xmind 文件 打开后会在当前目录生成 configuration,p2和workspace目录,artifacts.xml文件 解决

    在xmind安装目录下的xmind.ini修改如下配置,为绝对路径

  10. loadRunner运行场景时,事务数为0或是只显示添加的事务的数

    脚本编辑好后,不要着急到controller去执行,注意查看Run-time Settings(运行是设置)-->General(常规)-->Miscellaneous(其他)中查看Aut ...