Vue Typescript @Prop

语法：
	@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">
// InjectReactive
import { Component, Model, Vue, Emit, Inject, Prop } from 'vue-property-decorator'

@Component
export default class Chlid extends Vue {
    // data 数据范畴
    // model 数据绑定 也属于data 数据范畴，属于本地成员变量数据
    // 获取父组件关于input输入框中 value变量的绑定值 model 绑定为动态双向绑定
    @Model('input') value!: boolean

    // props 数据范畴 !表示不需要构造器进行数据初始化
    // 必要参数 数据类型 字符串 或 数字 只读 单向同步数据,如果利用prop反向同步数据会报错
    @Prop({ type: [String, Number], required: true }) readonly child!: string | number
    // 非必须参数
    @Prop(Number) readonly childA!: number
    // 非必传参数，拥有默认值
    @Prop({ default: 'default value' }) readonly childB!: string
    // 非必传 需要构建器初始化 仅一个参数时默认为type
    @Prop([String, Boolean]) readonly childC: string | boolean | undefined

    // 转发input事件，动作名称叫input,parent中绑定名称也应交做input
    @Emit('input')
    // eslint对any类型警告，可以在package.json中关闭 也可以对指定地方关闭
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    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">
// ProvideReactive
import { Component, Vue, Provide } from 'vue-property-decorator'
import Child from '@/components/Child.vue'
@Component({
  components: {
    Child
  }
})
export default class Parent extends Vue {
  // data 范畴的数据
  // 一个组件只会有一个 v-model
  content = '初始化内容'
  childA = 1
  childB = 'B'
  childC = true

  // methods
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  private childChange (val: any, event: any) {
    window.console.log('val', val)
    window.console.log('event', event)
    // 非响应式数据
    this.msg = val
    // 修改prop
    this.childB = val
  }
}
</script>