CODEWITHSUNDEEP
typescriptvue.js
杨亚洲
杨亚洲

Reputation: 11

vue-property-decorator: How to modify the parameters of @Emit

When I saw @Emit, I saw the example on GitHub.

import { Vue, Component, Emit } from 'vue-property-decorator'
   @Component
   export default class YourComponent extends Vue {
      count = 0
      @Emit()
      addToCount(n: number) {
         this.count += n
      }
   }

is equivalent to

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    addToCount(n) {
      this.count += n
      this.$emit('add-to-count', n)
    }
  }
}

Problem:

I want to know how to modify this parameter n. I use return statement but it doesn't work.

@Emit()
  startChange(num:any){
}

The type of the num parameter is Date. I want to transform it into timestamp and pass it on to the parent component. How do you do it?

Upvotes: 1

Views: 4131

Answers (1)

sroes
sroes

Reputation: 15053

You could probably do something like this:

@Component
export default class YourComponent extends Vue {
    date: Date

    get timestamp() {
        if (this.date) {
            return this.date.getTime();
        }
    }

    startChange(date: Date) {
        this.date = date
    }

    @Watch('timestamp')
    @Emit('timestampChange')
    onTimestampChanged(timestamp: number) {
    }
}

Alternatively:

@Component
export default class YourComponent extends Vue {
    timestamp: number

    startChangeByDate(date: Date) {
        this.startChangeByTimestamp(date.getTime())
    }

    @Emit('timestampChange')
    startChangeByTimestamp(timestamp: number) {
        this.timestamp= timestamp
    }
}

Upvotes: 2

Related Questions