vue-property-decorator -3- Props

[suzhen]

vue-property-decorator -3- Prop

1. 在 propName 后可以用?或者!来修饰

• • !: 必选参数
• • ?: 可选参数

2. @Prop接受一个参数可以是变量类型或者对象或者数组. @Prop接受的类型比如Number是JavaScript的类型, 之后定义的属性类型则是TypeScript的类型.

<template>
  <div class="hello">
    <h4>[{{ msg }}] - [{{ count }}] - [{{ name }}]</h4>
  </div>
</template>

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

@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string // 🎃 不接受参数
  @Prop(Number) readonly count!: number | undefined // 🎃 变量类型 
  @Prop({ default: 'suzhen' }) readonly name?: string // 🎃 对象类型 
  @Prop([String, Boolean]) readonly isTrue?: string | boolean | undefined
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>