Vue.js 2 Design Patterns and Best Practices
上QQ阅读APP看书,第一时间看更新

Properties

We've seen how we can create classes and use the Component decorator; let's now take a look at how we can define "props" inside of our class using the vue-property-decorator:

# Install Vue Property Decorator
npm install vue-property-decorator --save-dev

This depends on the vue-class-component, so anytime we install vue-property-decorator you'll need to ensure vue-class-component is also installed. Let's then define a Component property using the @Prop decorator:

<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';

// Omitted
@Component({
})
export default class App extends Vue {
@Prop({ default: 'Paul Halliday' }) name: string;
}
</script>

Notice how we're now importing the Component from 'vue-property-decorator' instead of vue-class-component. This is because it exports this as a module for us to import. We're then defining a new component property with the key of name and the default value of 'Paul Halliday'; prior to using TypeScript, it would have looked as follows:

export default {
props: {
name: {
type: String,
default: 'Paul Halliday'
}
}
}