参考:https://github.com/kaorun343/vue-property-decorator
怎么使vue支持ts写法呢,我们需要用到vue-property-decorator,这个组件完全依赖于vue-class-component.
首先安装: npm i -D vue-property-decorator
我们来看下页面上代码展示:
<template>
<div>
foo:{{foo}}
defaultArg:{{defaultArg}} | {{countplus}}
<button @click="delToCount($event)">点击del emit</button>
<HellowWordComponent></HellowWordComponent>
<button ref="aButton">ref</button>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Emit, Ref } from 'vue-property-decorator';
import HellowWordComponent from '@/components/HellowWordComponent.vue';
@Component({
components: {
HellowWordComponent,
},
beforeRouteLeave(to: any, from: any, next: any) {
console.log('beforeRouteLeave');
next();
},
beforeRouteEnter(to: any, from: any, next: any) {
console.log('beforeRouteLeave');
next();
},
})
export default class DemoComponent extends Vue {
private foo = 'App Foo!';
private count: number = this.$store.state.count;
@Prop(Boolean) private defaultArg: string | undefined;
@Emit('delemit') private delEmitClick(event: MouseEvent) {}
@Ref('aButton') readonly ref!: HTMLButtonElement;
// computed;
get countplus () {
return this.count;
}
created() {}
mounted() {}
beforeDestroy() {}
public delToCount(event: MouseEvent) {
this.delEmitClick(event);
this.count += 1; // countplus 会累加
}
}
</script>
<style lang="less">
...
</style>
vue-proporty-decorator它具备以下几个装饰器和功能:
- @Component
- @Prop
- @PropSync
- @Model
- @Watch
- @Provide
- @Inject
- @ProvideReactive
- @InjectReactive
- @Emit
- @Ref
1.@Component(options:ComponentOptions = {})
@Component 装饰器可以接收一个对象作为参数,可以在对象中声明 components ,filters,directives等未提供装饰器的选项,也可以声明computed,watch等
registerHooks:
除了上面介绍的将beforeRouteLeave放在Component中之外,还可以全局注册,就是registerHooks
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
Component.registerHooks([
'beforeRouteLeave',
'beforeRouteEnter',
]);
@Component
export default class App extends Vue {
beforeRouteLeave(to: any, from: any, next: any) {
console.log('beforeRouteLeave');
next();
}
beforeRouteEnter(to: any, from: any, next: any) {
console.log('beforeRouteLeave');
next();
}
}
</script>
2.@Prop(options: (PropOptions | Constructor[] | Constructor) = {})
@Prop装饰器接收一个参数,这个参数可以有三种写法:
Constructor,例如String,Number,Boolean等,指定 prop 的类型;
Constructor[],指定 prop 的可选类型;
PropOptions,可以使用以下选项:type,default,required,validator。
注意:属性的ts类型后面需要加上undefined类型;或者在属性名后面加上!,表示非null 和 非undefined
的断言,否则编译器会给出错误提示;
// 父组件:
<template>
<div class="Props">
<PropComponent :name="name" :age="age" :sex="sex"></PropComponent>
</div>
</template>
<script lang="ts">
import {Component, Vue,} from 'vue-property-decorator';
import PropComponent from '@/components/PropComponent.vue';
@Component({
components: {PropComponent,},
})
export default class PropsPage extends Vue {
private name = '张三';
private age = 1;
private sex = 'nan';
}
</script>
// 子组件:
<template>
<div class="hello">
name: {{name}} | age: {{age}} | sex: {{sex}}
</div>
</template>
<script lang="ts">
import {Component, Vue, Prop} from 'vue-property-decorator';
@Component
export default class PropComponent extends Vue {
@Prop(String) readonly name!: string | undefined;
@Prop({ default: 30, type: Number }) private age!: number;
@Prop([String, Boolean]) private sex!: string | boolean;
}
</script>
3,@PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {})
@PropSync装饰器与@prop用法类似,二者的区别在于:
@PropSync 装饰器接收两个参数:
propName: string 表示父组件传递过来的属性名;
options: Constructor | Constructor[] | PropOptions 与@Prop的第一个参数一致;
@PropSync 会生成一个新的计算属性。
注意,使用PropSync的时候是要在父组件配合.sync使用的
// 父组件
<template>
<div class="PropSync">
<h1>父组件</h1>
like:{{like}}
<hr/>
<PropSyncComponent :like.sync="like"></PropSyncComponent>
</div>
</template>
<script lang='ts'>
import { Vue, Component } from 'vue-property-decorator';
import PropSyncComponent from '@/components/PropSyncComponent.vue';
@Component({components: { PropSyncComponent },})
export default class PropSyncPage extends Vue {
private like = '父组件的like';
}
</script>
// 子组件
<template>
<div class="hello">
<h1>子组件:</h1>
<h2>syncedlike:{{ syncedlike }}</h2>
<button @click="editLike()">修改like</button>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, PropSync,} from 'vue-property-decorator';
@Component
export default class PropSyncComponent extends Vue {
@PropSync('like', { type: String }) syncedlike!: string; // 用来实现组件的双向绑定,子组件可以更改父组件穿过来的值
editLike(): void {
this.syncedlike = '子组件修改过后的syncedlike!'; // 双向绑定,更改syncedlike会更改父组件的like
}
}
</script>
4.@Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {})
@Model装饰器允许我们在一个组件上自定义v-model,接收两个参数:
event: string 事件名。
options: Constructor | Constructor[] | PropOptions 与@Prop的第一个参数一致。
注意,有看不懂的,可以去看下vue官网文档, https://cn.vuejs.org/v2/api/#model
// 父组件
<template>
<div class="Model">
<ModelComponent v-model="fooTs" value="some value"></ModelComponent>
<div>父组件 app : {{fooTs}}</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import ModelComponent from '@/components/ModelComponent.vue';
@Component({ components: {ModelComponent} })
export default class ModelPage extends Vue {
private fooTs = 'App Foo!';
}
</script>
// 子组件
<template>
<div class="hello">
子组件:<input type="text" :value="checked" @input="inputHandle($event)"/>
</div>
</template>
<script lang="ts">
import {Component, Vue, Model,} from 'vue-property-decorator';
@Component
export default class ModelComponent extends Vue {
@Model('change', { type: String }) readonly checked!: string
public inputHandle(that: any): void {
this.$emit('change', that.target.value); // 后面会讲到@Emit,此处就先使用this.$emit代替
}
}
</script>
5,@Watch(path: string, options: WatchOptions = {})
@Watch 装饰器接收两个参数:
path: string 被侦听的属性名;
options?: WatchOptions={} options可以包含两个属性 :
immediate?:boolean 侦听开始之后是否立即调用该回调函数;
deep?:boolean 被侦听的对象的属性被改变时,是否调用该回调函数;
发生在beforeCreate勾子之后,created勾子之前
<template>
<div class="PropSync">
<h1>child:{{child}}</h1>
<input type="text" v-model="child"/>
</div>
</template>
<script lang="ts">
import { Vue, Watch, Component } from 'vue-property-decorator';
@Component
export default class WatchPage extends Vue {
private child = '';
@Watch('child')
onChildChanged(newValue: string, oldValue: string) {
console.log(newValue);
console.log(oldValue);
}
}
</script>
6,@Emit(event?: string)
@Emit 装饰器接收一个可选参数,该参数是$Emit的第一个参数,充当事件名。如果没有提供这个参数,$Emit会将回调函数名的camelCase转为kebab-case,并将其作为事件名;
@Emit会将回调函数的返回值作为第二个参数,如果返回值是一个Promise对象,$emit会在Promise对象被标记为resolved之后触发;
@Emit的回调函数的参数,会放在其返回值之后,一起被$emit当做参数使用。
// 父组件
<template>
<div class="">
点击emit获取子组件的名字<br/>
姓名:{{emitData.name}}
<hr/>
<EmitComponent sex='女' @add-to-count="returnPersons" @delemit="delemit"></EmitComponent>
</div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import EmitComponent from '@/components/EmitComponent.vue';
@Component({
components: { EmitComponent },
})
export default class EmitPage extends Vue {
private emitData = { name: '我还没有名字' };
returnPersons(data: any) {
this.emitData = data;
}
delemit(event: MouseEvent) {
console.log(this.emitData);
console.log(event);
}
}
</script>
// 子组件
<template>
<div class="hello">
子组件:
<div v-if="person">
姓名:{{person.name}}<br/>
年龄:{{person.age}}<br/>
性别:{{person.sex}}<br/>
</div>
<button @click="addToCount(person)">点击emit</button>
<button @click="delToCount($event)">点击del emit</button>
</div>
</template>
<script lang="ts">
import {
Component, Vue, Prop, Emit,
} from 'vue-property-decorator';
type Person = {name: string; age: number; sex: string };
@Component
export default class PropComponent extends Vue {
private name: string | undefined;
private age: number | undefined;
private person: Person = { name: '我是子组件的张三', age: 1, sex: '男' };
@Prop(String) readonly sex: string | undefined;
@Emit('delemit') private delEmitClick(event: MouseEvent) {}
@Emit() // 如果此处不设置别名字,则默认使用下面的函数命名
addToCount(p: Person) { // 此处命名如果有大写字母则需要用横线隔开 @add-to-count
return this.person; // 此处不return,则会默认使用括号里的参数p;
}
delToCount(event: MouseEvent) {
this.delEmitClick(event);
}
}
</script>
7,@Ref(refKey?: string)
@Ref 装饰器接收一个可选参数,用来指向元素或子组件的引用信息。如果没有提供这个参数,会使用装饰器后面的属性名充当参数
<template>
<div class="PropSync">
<button @click="getRef()" ref="aButton">获取ref</button>
<RefComponent name="names" ref="RefComponent"></RefComponent>
</div>
</template>
<script lang="ts">
import { Vue, Component, Ref } from 'vue-property-decorator';
import RefComponent from '@/components/RefComponent.vue';
@Component({
components: { RefComponent },
})
export default class RefPage extends Vue {
@Ref('RefComponent') readonly RefC!: RefComponent;
@Ref('aButton') readonly ref!: HTMLButtonElement;
getRef() {
console.log(this.RefC);
console.log(this.ref);
}
}
</script>
8.Provide/Inject ProvideReactive/InjectReactive
@Provide(key?: string | symbol) / @Inject(options?: { from?: InjectKey, default?: any } | InjectKey) decorator
@ProvideReactive(key?: string | symbol) / @InjectReactive(options?: { from?: InjectKey, default?: any } | InjectKey) decorator
提供/注入装饰器,
key可以为string或者symbol类型,
相同点:Provide/ProvideReactive提供的数据,在内部组件使用Inject/InjectReactive都可取到
不同点:
如果提供(ProvideReactive)的值被父组件修改,则子组件可以使用InjectReactive捕获此修改。
// 最外层组件
<template>
<div class="">
<H3>ProvideInjectPage页面</H3>
<div>
在ProvideInjectPage页面使用Provide,ProvideReactive定义数据,不需要props传递数据
然后爷爷套父母,父母套儿子,儿子套孙子,最后在孙子组件里面获取ProvideInjectPage
里面的信息
</div>
<hr/>
<provideGrandpa></provideGrandpa> <!--爷爷组件-->
</div>
</template>
<script lang="ts">
import {
Vue, Component, Provide, ProvideReactive,
} from 'vue-property-decorator';
import provideGrandpa from '@/components/ProvideGParentComponent.vue';
@Component({
components: { provideGrandpa },
})
export default class ProvideInjectPage extends Vue {
@Provide() foo = Symbol('fooaaa');
@ProvideReactive() fooReactive = 'fooReactive';
@ProvideReactive('1') fooReactiveKey1 = 'fooReactiveKey1';
@ProvideReactive('2') fooReactiveKey2 = 'fooReactiveKey2';
created() {
this.foo = Symbol('fooaaa111');
this.fooReactive = 'fooReactive111';
this.fooReactiveKey1 = 'fooReactiveKey111';
this.fooReactiveKey2 = 'fooReactiveKey222';
}
}
</script>
// ...provideGrandpa调用父母组件
<template>
<div class="hello">
<ProvideParentComponent></ProvideParentComponent>
</div>
</template>
// ...ProvideParentComponent调用儿子组件
<template>
<div class="hello">
<ProvideSonComponent></ProvideSonComponent>
</div>
</template>
// ...ProvideSonComponent调用孙子组件
<template>
<div class="hello">
<ProvideGSonComponent></ProvideGSonComponent>
</div>
</template>
// 孙子组件<ProvideGSonComponent>,经过多层引用后,在孙子组件使用Inject可以得到最外层组件provide的数据哦
<template>
<div class="hello">
<h3>孙子的组件</h3>
爷爷组件里面的foo:{{foo.description}}<br/>
爷爷组件里面的fooReactive:{{fooReactive}}<br/>
爷爷组件里面的fooReactiveKey1:{{fooReactiveKey1}}<br/>
爷爷组件里面的fooReactiveKey2:{{fooReactiveKey2}}
<span style="padding-left:30px;">=> fooReactiveKey2没有些key所以取不到哦</span>
</div>
</template>
<script lang="ts">
import {
Component, Vue, Inject, InjectReactive,
} from 'vue-property-decorator';
@Component
export default class ProvideGSonComponent extends Vue {
@Inject() readonly foo!: string;
@InjectReactive() fooReactive!: string;
@InjectReactive('1') fooReactiveKey1!: string;
@InjectReactive() fooReactiveKey2!: string;
}
</script>
demo地址:https://github.com/slailcp/vue-cli3/tree/master/src/pc-project/views/manage
原文链接:https://blog.csdn.net/sllailcp/article/details/102542796/
vue-property-decorator
这个组件完全依赖于vue-class-component
.它具备以下几个属性:
- @Component (完全继承于
vue-class-component
) - @Emit
- @Inject
- @Provice
- @Prop
- @Watch
- @Model
- Mixins (在
vue-class-component
中定义);
使用
当我们在vue
单文件中使用TypeScript
时,引入vue-property-decorator
之后,script
中的标签就变为这样:
<script lang="ts">
import {Vue, Component} from 'vue-property-decorator';
@Component({})
export default class "组件名" extends Vue{
ValA: string = "hello world";
ValB: number = 1;
}
</script>
等同于
<script lang="es6">
import Vue from 'vue';
export default {
data(){
return {
ValA: 'hello world',
ValB: 1
}
}
}
</script>
- 总结: 对于
data
里的变量对顶,我们可以直接按ts
定义类变量的写法写就可以
那么如果是计算属性呢? 这就要用到getter
了.
<script lang="ts">
import {Vue, Component} from 'vue-property-decorator';
@Component({})
export default class "组件名" extends Vue{
get ValA(){
return 1;
}
}
</script>
等同于
<script lang="es6">
import Vue from 'vue';
export default {
computed: {
ValA: function() {
return 1;
}
}
}
</script>
- 总结: 对于
Vue
中的计算属性,我们只需要将该计算属性名定义为一个函数,并在函数前加上get
关键字即可.
原本Vue
中的computed
里的每个计算属性都变成了在前缀添加get
的函数.
@Emit
关于Vue
中的事件的监听与触发,Vue
提供了两个函数$emit
和$on
.那么在vue-property-decorator
中如何使用呢?
这就需要用到vue-property-decorator
提供的@Emit
属性.
<script lang="ts">
import {Vue, Component, Emit} from 'vue-property-decorator';
@Component({})
export default class "组件名" extends Vue{
mounted(){
this.$on('emit-todo', function(n) {
console.log(n)
})
this.emitTodo('world');
}
@Emit()
emitTodo(n: string){
console.log('hello');
}
}
</script>
运行上面的代码会打印 'hello' 'world', 为什么呢? 让我们来看看它等同于什么
<script lang="es6">
import Vue from 'vue';
export default {
mounted(){
this.$on('emit-todo', function(n) {
console.log(n)
})
this.emitTodo('world');
},
methods: {
emitTodo(n){
console.log('hello');
this.$emit('emit-todo', n);
}
}
}
</script>
可以看到,在@Emit
装饰器的函数会在运行之后触发等同于其函数名(驼峰式会转为横杠式写法
)的事件, 并将其函数传递给$emit
.
如果我们想触发特定的事件呢,比如在emitTodo
下触发reset
事件:
<script lang="ts">
import {Vue, Component, Emit} from 'vue-property-decorator';
@Component({})
export default class "组件名" extends Vue{
@Emit('reset')
emitTodo(n: string){
}
}
</script>
我们只需要给装饰器@Emit
传递一个事件名参数reset
,这样函数emitTodo
运行之后就会触发reset
事件.
- 总结:在
Vue
中我们是使用$emit
触发事件,使用vue-property-decorator
时,可以借助@Emit
装饰器来实现.@Emit
修饰的函数所接受的参数会在运行之后触发事件的时候传递过去.@Emit
触发事件有两种写法
@Emit()
不传参数,那么它触发的事件名就是它所修饰的函数名.@Emit(name: string)
,里面传递一个字符串,该字符串为要触发的事件名.
@Watch
我们可以利用vue-property-decorator
提供的@Watch
装饰器来替换Vue
中的watch
属性,以此来监听值的变化.
在Vue
中监听器的使用如下:
export default{
watch: {
'child': this.onChangeValue
// 这种写法默认 `immediate`和`deep`为`false`
,
'person': {
handler: 'onChangeValue',
immediate: true,
deep: true
}
},
methods: {
onChangeValue(newVal, oldVal){
// todo...
}
}
}
那么我们如何使用@Watch
装饰器来改造它呢?
import {Vue, Component, Watch} from 'vue-property-decorator';
@Watch('child')
onChangeValue(newVal: string, oldVal: string){
// todo...
}
@Watch('person', {immediate: true, deep: true})
onChangeValue(newVal: Person, oldVal: Person){
// todo...
}
- 总结:
@Watch
使用非常简单,接受第一个参数为要监听的属性名 第二个属性为可选对象.@Watch
所装饰的函数即监听到属性变化之后的操作.
@Prop
我们在使用Vue
时有时会遇到子组件接收父组件传递来的参数.我们需要定义Prop
属性.
比如子组件从父组件接收三个属性propA
,propB
,propC
.
propA
类型为Number
propB
默认值为default value
propC
类型为String
或者Boolean
export default {
props: {
propA: {
type: Number
},
propB: {
default: 'default value'
},
propC: {
type: [String, Boolean]
},
}
}
我们使用vue-property-decorator
提供的@Prop
可以将上面的代码改造为如下:
<script lang="ts">
import {Vue, Component, Prop} from 'vue-property-decorator';
@Component({})
export default class "组件名" extends Vue{
@Prop(Number) propA!: number;
@Prop({default: 'default value'}) propB!: string;
@propC([String, Boolean]) propC: string | boolean;
}
</script>
这里
!
和可选参数?
是相反的,!
告诉TypeScript
我这里一定有值.
- 总结:
@Prop
接受一个参数可以是类型变量或者对象或者数组.@Prop
接受的类型比如Number
是JavaScript
的类型,之后定义的属性类型则是TypeScript
的类型.
Mixins
在使用Vue
进行开发时我们经常要用到混合,结合TypeScript
之后我们有两种mixins
的方法.
一种是vue-class-component
提供的.
//定义要混合的类 mixins.ts
import Vue from 'vue';
import Component from 'vue-class-component';
@Component // 一定要用Component修饰
export default class myMixins extends Vue {
value: string = "Hello"
}
// 引入
import Component {mixins} from 'vue-class-component';
import myMixins from 'mixins.ts';
@Component
export class myComponent extends mixins(myMixins) {
// 直接extends myMinxins 也可以正常运行
created(){
console.log(this.value) // => Hello
}
}
第二种方式是在@Component
中混入.
我们改造一下mixins.ts
,定义vue/type/vue
模块,实现Vue
接口
// mixins.ts
import { Vue, Component } from 'vue-property-decorator';
declare module 'vue/types/vue' {
interface Vue {
value: string;
}
}
@Component
export default class myMixins extends Vue {
value: string = 'Hello'
}
混入
import { Vue, Component, Prop } from 'vue-property-decorator';
import myMixins from '@static/js/mixins';
@Component({
mixins: [myMixins]
})
export default class myComponent extends Vue{
created(){
console.log(this.value) // => Hello
}
}
- 总结: 两种方式不同的是在定义
mixins
时如果没有定义vue/type/vue
模块, 那么在混入的时候就要继承
该mixins
; 如果定义vue/type/vue
模块,在混入时可以在@Component
中mixins
直接混入.
@Model
Vue
组件提供model
: {prop?: string, event?: string}
让我们可以定制prop
和event
.
默认情况下,一个组件上的v-model
会把 value
用作 prop
且把 input
用作 event
,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop
来达到不同的目的。使用model
选项可以回避这些情况产生的冲突。
- 下面是
Vue
官网的例子
Vue.component('my-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
// this allows using the `value` prop for a different purpose
value: String,
// use `checked` as the prop which take the place of `value`
checked: {
type: Number,
default: 0
}
},
// ...
})
<my-checkbox v-model="foo" value="some value"></my-checkbox>
上述代码相当于:
<my-checkbox
:checked="foo"
@change="val => { foo = val }"
value="some value">
</my-checkbox>
即foo
双向绑定的是组件的checke
, 触发双向绑定数值的事件是change
使用vue-property-decorator
提供的@Model
改造上面的例子.
import { Vue, Component, Model} from 'vue-property-decorator';
@Component
export class myCheck extends Vue{
@Model ('change', {type: Boolean}) checked!: boolean;
}
- 总结,
@Model()
接收两个参数, 第一个是event
值, 第二个是prop
的类型说明, 与@Prop
类似, 这里的类型要用JS
的. 后面在接着是prop
和在TS
下的类型说明.
链接:https://www.jianshu.com/p/d8ed3aa76e9b