在typescript環境下，vue的屬性、事件等寫法有很大的不同，在這裡做一個總結：

import { Component,Vue, Prop, Emit , Watch } from 'vue-property-decorator';

一、計算屬性

javascript

computed: {
        // 計算屬性的 getter
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
}

typescript

//  這裡面的‘chatacctSex’不用另外定義，可以直接用

get chatacctSex() {
    if(this.accountDetail.idcardCode !=='') {
        if(Number((this.accountDetail.idcardCode).split('')[16])%2 === 0) {
               return '女'
           } else if (Number((this.accountDetail.idcardCode).split('')[16])%2 === 1) {
               return '男'
           }
        } else {
           return '未知'
   }
}
 

 二、Watch

javascript

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 深度 watcher
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 該回調將會在偵聽開始之後被立即呼叫
    d: {
      handler: function (val, oldVal) { /* ... */ },
      immediate: true
    },
    e: [
      function handle1 (val, oldVal) { /* ... */ },
      function handle2 (val, oldVal) { /* ... */ }
    ],
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1
 

typescript

這裡onchange可以寫在需要監聽的屬性前面，也可以寫在後面

@Watch('refreshTime')
private refreshTimeOnChange(newVal: number) {
   console.info(newVal) 
}

三、父子元件傳值

1、emit （子元件向父元件傳值）

javascript

/** 子元件 */

// 第一個引數是自定義的事件名稱，第二個需要上傳到父元件的引數

this.$emit('resetExpireTime',this.expireTime)

/** 父元件 */

<temp-on-off @resetExpireTime="onResetExpireTime"></temp-on-off>

onResetExpireTime:function(value) {
   console.info(value)
}

typescript

/** 子元件 */

@Emit()
private manuallyRefresh(refreshTime: number,msgId: string) {
    console.info('Emit manuallyRefresh')

}

/** 父元件 */

//  這裡需要注意的是，父元件裡面@後面的事件名稱需要將駝峰命名改成‘-’連線

<message-report @manually-refresh='onManuallyRefresh'/>

private onManuallyRefresh(time: number,msgId: string) {
    this.refreshmsgId = msgId
    this.refreshTime = time

}

2、prop （父元件向子元件傳值） 

 javascript

/** 父元件 */

<talk-trend :date="talkTrend.talkDate"/>

/** 子元件*/

props:['date']

created() {
  console.info(this.date)
}

 typescript

/** 父元件 */
// 給父元件新增屬性

<message-report :source="messageSource" @manually-refresh='onManuallyRefresh'/>

private  messageSource: string = 'chat'


/** 子元件 */

@Prop({ default: '' })
private source: string;

private created() {
   console.info(this.source)
}