vue-property-decorator vue框架typescript装饰器的使用

最新推荐文章于 2024-06-03 10:43:57 发布

呆子小木心

最新推荐文章于 2024-06-03 10:43:57 发布

阅读量500

点赞数

分类专栏： vue 文章标签： ts vue typescript

本文链接：https://blog.csdn.net/cc6_66/article/details/109989447

版权

vue 专栏收录该内容

50 篇文章 2 订阅

订阅专栏

vue-property-decorator vue框架typescript装饰器的使用

vue-property-decorator
安装：

npm i -S vue-property-decorator

这个组件完全依赖于vue-class-component.它具备以下几个属性:

@Component (完全继承于vue-class-component)
@Prop：父子组件之间值的传递
@Emit：子组件向父组件传递
@Model：双向绑定
@Watch：观察的表达式变动
@Provice：在组件嵌套层级过深时。父组件不便于向子组件传递数据。就把数据通过Provide传递下去。
@Inject：然后子组件通过Inject来获取
Mixins (在vue-class-component中定义);

建议项目中只引用vue-property-decorator就可以了，避免@Component从vue-class-component和vue-property-decorator两个中随意引用。

data值的声明

在这里 public 声明的是公有属性， private 声明的是私有属性，私有属性要带下划线
蓝色框里的内容是声明组件，在每个组件创建时都要带上， Components 中的写法如下

上面是普通写法，下面的是懒加载写法
@Prop 父组件传值给子组件

父组件使用 v-bind 传递与js版本一样，在父组件接受是使用修饰器
@Prop({type:‘类型’})
readonly:传递的参数名称!:类型
一定要写全，不然后报错，也可以写个接口约束类型
在这里插入图片描述

@Emit 子组件给父组件传值

@Emit(‘传给父组件的值’)
callback
父组件接收与 js 版本一致
@Provide @Inject 混入
这个没什么说的， @Provide 声明一个值 , 在其他地方用 @Inject 接收
@Watch 监听函数

@Watch(‘监听的值’,{深度监听})
callback 回调函数
钩子函数的声明与js基本一致

Ts                   -> Js
public create() {}   -> create() {}
public mounted() {}  ->  mounted() {}
eg:
private _changeMsg() {} ->  methods: {
_changeMsg() {}
}
eg:
private get _changeValue() {} -> computed: {
_changeValue() {}
}
public destory() {}      -> destory() {}

@State vuex中state的值

在这里插入图片描述
@State(state => state数据里的参数) 页面展示的值
！！！！！！注意vuex的数据都要在钩子函数里调用！！！！！！！！！！！！！！

@Mutation vuex中的mutation

使用与 @State 一致
！！！！！！！！！！！！！需要注意的是要写一个接口将state里面的数据类型写进去,如果直接用
state编辑器会报错 , 当然声明any类型也是可以的, 但是用了Ts还是尽量不要用any吧
@Model：双向数据绑定 (组件之间，checkbox)

<template lang=”ts”> 
input(type="checkbox" :checked="checked" @change="change")
</template> 

import{Vue,Component,Model,Emit}from'vue-property-decorator';
@Component
export default class YourComponent extends Vue{ 
@Model('change',{ 
type:Boolean
 }) 
checked!:boolean; 
@Emit('change') 
change(e:MouseEvent){} 
}