vue-property-decorator使用指南

vue-property-decorator使用指南

原文連接：http://www.javashuo.com/article/p-vjiwdxlf-dz.html

在Vue中使用TypeScript時，很是好用的一個庫，使用裝飾器來簡化書寫。

一、安裝npm install --save vue-property-decorator

• @Component (from vue-class-component)
• @Prop
• @Model
• @Watch
• @Emit
• @Inject
• @Provide
• Mixins (the helper function named mixins defined at vue-class-component)

二、@Component

import {componentA,componentB} from '@/components'; export default{ components:{ componentA, componentB, }, directives: { focus: { // 指令的定義 inserted: function (el) { el.focus() } } } } 複製代碼

ts寫法

import {Component,Vue} from 'vue-property-decorator'; import {componentA,componentB} from '@/components'; @Component({ components:{ componentA, componentB, }, directives: { focus: { // 指令的定義 inserted: function (el) { el.focus() } } } }) export default class YourCompoent extends Vue{ } 複製代碼

三、@Prop 父子組件之間值的傳遞

js寫法

export default{ props:{ propA:String, // propA:Number propB:[String,Number], propC:{ type:Array, default:()=>{ return ['a','b'] }, required: true, validator:(value) => { return [ 'a', 'b' ].indexOf(value) !== -1 } } } } 複製代碼

ts寫法

import {Component,Vue,Prop} from vue-property-decorator; @Component export default class YourComponent extends Vue { @Prop(String) propA:string; @Prop([String,Number]) propB:string|number; @Prop({ type: String, // type: [String , Number] default: 'default value', // 通常爲String或Number //若是是對象或數組的話。默認值從一個工廠函數中返回 // defatult: () => { // return ['a','b'] // } required: true, validator: (value) => { return [ 'InProcess', 'Settled' ].indexOf(value) !== -1 } }) propC:string; } 複製代碼

四、@Model (組件之間，checkbox)

父組件中使用 v-model="checked" 子組件

<input  type="checkbox" :checked="checked" @change="change"> 複製代碼

js寫法 ==（2.2.0+ 新增）==

export default { model:{ prop:'checked', event:'change' }, props:{ checked:{ type:Boolean } }, methods:{ change(e){ this.$emit('change', e.target.checked) } } } 複製代碼

ts寫法

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){} } 複製代碼

五、@Watch

js寫法

export default { watch: { 'person': { handler: 'onPersonChanged', immediate: true, deep: true } }, methods: { onPersonChanged(val, oldVal) { } } } 複製代碼

ts寫法

import {Vue, Component, Watch} from 'vue-property-decorator'; @Component export default class YourComponent extends Vue{ @Watch('person', { immediate: true, deep: true }) onPersonChanged(val: Person, oldVal: Person) { } } 複製代碼

六、@Emit

由@Emit $emit 定義的函數發出它們的返回值，後跟它們的原始參數。 若是返回值是promise，則在發出以前將其解析。

若是事件的名稱未經過事件參數提供，則使用函數名稱。 在這種狀況下，camelCase名稱將轉換爲kebab-case。

js寫法

export default { data() { return { count: 0 } }, methods: { addToCount(n) { this.count += n this.$emit('add-to-count', n) }, resetCount() { this.count = 0 this.$emit('reset') }, returnValue() { this.$emit('return-value', 10) }, promise() { const promise = new Promise(resolve => { setTimeout(() => { resolve(20) }, 0) }) promise.then(value => { this.$emit('promise', value) }) } } } 複製代碼

ts寫法

import { Vue, Component, Emit } from 'vue-property-decorator' @Component export default class YourComponent extends Vue { count = 0 @Emit() addToCount(n: number) { this.count += n } @Emit('reset') resetCount() { this.count = 0 } @Emit() returnValue() { return 10 } @Emit() promise() { return new Promise(resolve => { setTimeout(() => { resolve(20) }, 0) }) } } 複製代碼

七、@Provide 提供 / @Inject 注入

注：父組件不便於向子組件傳遞數據，就把數據經過Provide傳遞下去，而後子組件經過Inject來獲取

js寫法

const symbol = Symbol('baz') export const MyComponent = Vue.extend({ inject: { foo: 'foo', bar: 'bar', 'optional': { from: 'optional', default: 'default' }, [symbol]: symbol }, data () { return { foo: 'foo', baz: 'bar' } }, provide () { return { foo: this.foo, bar: this.baz } } }) 複製代碼

ts寫法

import {Vue,Component,Inject,Provide} from 'vue-property-decorator'; const symbol = Symbol('baz') @Component export defalut class MyComponent extends Vue{ @Inject() foo!: string; @Inject('bar') bar!: string; @Inject({ from:'optional', default:'default' }) optional!: string; @Inject(symbol) baz!: string; @Provide() foo = 'foo' @Provide('bar') baz = 'bar' }