在Vue中使用TypeScript時，非常好用的一個庫，使用裝飾器來簡化書寫。
1、安裝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)
2、@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{
}複製程式碼3、@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;
@Componentexport 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;
}複製程式碼4、@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';
@Componentexport default class YourComponent extends Vue{
@Model('change',{
type:Boolean
}) checked!:boolean;
@Emit('change') change(e:MouseEvent){
}
}複製程式碼5、@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';
@Componentexport default class YourComponent extends Vue{
@Watch('person', {
immediate: true, deep: true
}) onPersonChanged(val: Person, oldVal: Person) {
}
}複製程式碼6、@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'@Componentexport 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)
})
}
}複製程式碼7、@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')@Componentexport 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'
}複製程式碼