语法:
@Prop(options: (PropOptions | Constructor[] | Constructor) = {})
参数说明:
@Prop装饰器接收一个参数,这个参数可以有三种写法:
Constructor
例如String,Number,Boolean等,指定 prop 的类型;
Constructor[]
指定 prop 的可选类型;
PropOptions
可以使用以下选项:type,default,required,validator。
<!--
* @FilePath: \hello-typescript\src\components\Child.vue
-->
<template>
<div style="border: 1px solid black;padding: 2rem;">
<h1>Child Component</h1>
<span>{{pMsg}}</span><br/>
<!-- <span>{{prMsg}}</span><br/> -->
<span>{{child}}</span><br/>
<span>{{childA}}</span><br/>
<span>{{childB}}</span><br/>
<span>{{childC}}</span><br/>
<input type="text" :value="value" @input="changed" placeholder="please write something..."/>
</div>
</template>
<script lang="ts">
import { Component, Model, Vue, Emit, Inject, Prop } from 'vue-property-decorator'
@Component
export default class Chlid extends Vue {
@Model('input') value!: boolean
@Prop({ type: [String, Number], required: true }) readonly child!: string | number
@Prop(Number) readonly childA!: number
@Prop({ default: 'default value' }) readonly childB!: string
@Prop([String, Boolean]) readonly childC: string | boolean | undefined
@Emit('input')
changed (event: any) {
return event.target.value
}
}
</script>
<!--
* @FilePath: \hello-typescript\src\views\Parent.vue
-->
<template>
<div>
<h1>Parent</h1>
<Child v-model="content" @input="childChange" :child="content" :childA="childA" :childB="childB" :childC="childC"></Child><br/>
<p>
<b>
Child 与 Parent 绑定的内容 => {{content}}
</b>
</p>
</div>
</template>
<script lang="ts">
import { Component, Vue, Provide } from 'vue-property-decorator'
import Child from '@/components/Child.vue'
@Component({
components: {
Child
}
})
export default class Parent extends Vue {
content = '初始化内容'
childA = 1
childB = 'B'
childC = true
private childChange (val: any, event: any) {
window.console.log('val', val)
window.console.log('event', event)
this.msg = val
this.childB = val
}
}
</script>