<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下的类型说明.
暂时常用的就这几个,还有@Provice和@Inject等用到了再写.