vue中使⽤TS的class-style代码风格
前⾔：
vue 中使⽤ typescript的 class-style 风格代码，除了⽤到ts的语法，还⽤到了 vue-property-decorator语法 vue-class-component语法
vue-property-decorator 与 vue-class-component 的关系
vue class component 是vue 官⽅出的
vue property decorator 是社区出的
其中vue class component 提供了 vue component 等等
vue property decorator 深度依赖了 vue class component 拓展出了很多操作符 @Prop @Emit @Inject 等等可以说是 vue class component 的⼀个超集
正常开发的时候你只需要使⽤ vue property decorator 中提供的操作符即可不⽤再从vue class componen 引⼊vue component
⼀、如何使⽤（）
1、导⼊npm 包
npm i -S vue-property-decorator
主要有以下⼀些装饰器和⼀个⽅法
@Prop
@PropSync
@Model
@ModelSync
@Watch
@Provide
@Inject
@ProvideReactive
@InjectReactive
@Emit
@Ref
@VModel
@Component (provided by vue-class-component)
Mixins (the helper function named mixins provided by vue-class-component)
@Component
注：该属性完全继承于vue-class-component
属性参数：@Component(options: ComponentOptions = {})
参数说明：@Component 装饰器可以接收⼀个对象作为参数，可以在对象中声明 components ，filters，directives, beforeRouteLeave等未提供装饰器的选项，也可以声明computed，watch等
<template>
<div class="parent">
parent组件--{{title}}
<hr>
<Home v-model="title"></Home>
<About v-model="title"></About>
</div>
</template>
1、js 写法
<script>
import Home from './Home.vue'
import About from './About.vue'
export default {
data() {
return {
title: '⽗组件中的值'
}
},
components: {
Home,
About
}
}
</script>
vue中reactive2、ts 写法
<script lang='ts'>
import Home from './Home.vue'
import About from './About.vue'
import { Component, Vue } from 'vue-property-decorator';
@Component({
components: {
Home,
About
}
})
export default class  extends Vue {
private title: string = '⽗组件中的值'
}
</script>
@Emit
属性参数：@Emit(event?: string)
参数说明：
@Emit 装饰器接收⼀个可选参数，充当事件名。如果没有提供这个参数，@Emit会将回调函数名的camelCase转为kebab-case，并将其作为事件名；
@Emit的回调函数的参数，会在回调函数没有返回值的情况下，被$emit当做第⼆个参数使⽤。
@Emit会将回调函数的返回值作为第⼆个参数，如果返回值是⼀个Promise对象，$emit会在Promise对象被标记为resolved之后触发；
<template>
<div class="home">
vue+ts项⽬vue-property-decorator⽤法
<hr>
<button @click="triggerEmit('qqq')">触发emit</button>
</div>
</template>
1、js写法
export default {
data() {
return {}
},
mounted() {
this.$on('trigger-emit', data => {
alert(data)
})
},
methods: {
triggerEmit(val) {
this.$emit('trigger-emit', val)
}
}
}
2、ts写法
<script lang="ts">
import { Component, Vue, Emit } from 'vue-property-decorator';
@Component({})
export default class Home extends Vue {
private mounted() {
this.$on('demo-log', (data: any): void => {
alert(data)
})
}
@Emit('demo-log')
triggerEmit(n: any) {
console.log('hhh')
}
}
</script>
另⼀种写法，$on位置使⽤ - 链接，@Emit位置直接使⽤驼峰命名，则可以省略括号中的名称：”
export default class Home extends Vue {
private mounted() {
this.$on('trigger-emit', (data: any): void => {
alert(data)
})
}
@Emit()
triggerEmit(n: any) {
console.log('hhh')
}
}
案例⼆、
ts
<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)
})
}
@Emit()
emitTodo(n: string){
console.log('hello');
}
}
</script>
以上代码会输出 hello world，js写法如下
<script>
import Vue from 'vue';
export default {
mounted(){
this.$on('emit-todo', function(n) {
console.log(n)
})
},
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事件.
@Prop
属性参数：@Prop(options: (PropOptions | Constructor[] | Constructor) = {})
参数说明：@Prop装饰器接收⼀个参数，这个参数可以有三种写法：
PropOptions，可以使⽤以下选项：type，default，required，validator;
Constructor[]，指定 prop 的可选类型；
Constructor，例如String，Number，Boolean等，指定 prop 的类型；
注意：
属性的ts类型后⾯需要加上undefined类型；或者在属性名后⾯加上!，表⽰⾮null 和⾮undefined的断⾔，告诉TypeScript我这⾥⼀定有值，否则编译器会给出错误提⽰；
!: 表⽰⼀定存在，?: 表⽰可能不存在。这两种在语法上叫赋值断⾔
⽐如⼦组件从⽗组件接收三个属性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;
@prop([String, Boolean]) propC: string | boolean;
}
</script>
@Prop接受⼀个参数可以是类型变量或者对象或者数组.@Prop接受的类型⽐如Number是JavaScript的类型，之后定义的属性类型则是TypeScript的类型.
@Ref
属性参数：@Ref(refKey?: string)
参数说明：@Ref 装饰器接收⼀个可选参数，⽤来指向元素或⼦组件的引⽤信息。如果没有提供这个参数，会使⽤装饰器后⾯的属性名充当参数

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。