vue+typescript+vue-property-deco

最近的项目使用的技术栈为 vue + typescrit + vue-property-decorator

可以不使用 vue模版组件，通过 'vue-property-decorator'插件，写出oo风格的组件

其中的 v-model 和 .vue 模版有些区别

import { Vue, Component, Prop, Watch } from 'vue-property-decorator'

@Component
export default class Son extends Vue {
    // @Prop ({default: ''}) str! :string
    @Prop () value!: string
    // @Prop ({type: Array}) value!: any[]
    @Prop ({type: Array}) data!: any[]
    @Prop ({type: Number}) num!: number
    // value 是 联动的 是 ‘v-model’ 最好value 结合 model ,
    // 此处是value 结合 tempStr,也可达到效果，但是prop 一定是 value
    // str  不是联动的
    // data 是联动的
    // model = this.value
    tempData = this.data
    tempStr: string = this.value
    tempNum = this.num

    @Watch ('value')
    onValueChange() {
        // this.model = this.value
        this.tempStr = this.value
        console.log('son value changes....')
    }
    @Watch('tempStr')
    onModelChange(val) {
        console.log('son model changes...')
        // this.$emit('input',this.tempStr)
    }
    @Watch ('data') 
    onDataChange() {
        // 此处 数据会联动， 但不会进入到这里
        console.log('data changes')
        this.tempData = this.data
    }
    @Watch ('str') 
    onStrChange() {
        console.log('whosd changes')
        this.tempStr = this.str
    }
    @Watch ('tempStr') 
    onTempArr() {
        console.log('tempArr changes...')
    }
    
    render () {
        return (
            <div style={{width: '100px', height: '50px', border: '1px solid #999'}}>
                <input type="text" v-model={this.tempStr}/>
                <br/>
                <input type="text" v-model={this.tempNum}/>
                <ul>
                    {this.tempData.map(item=>{
                        return (
                            <li>
                                <input v-model={item.age} />
                            </li>
                        )
                    })}
                </ul>
            </div>
        )
    }

}

Prop是 对象时，数据通过 v-model时，改变时，会修改data和Prop，并且会修改 父组件传入的对象,不通过 v-model,通过prop 也可以达到同样效果，命名不要求时 value 和 model
Prop是 字符串，布尔值，数字时，数据通过 v-model时，改变时，会修改data但是不会修改Prop，也不会修改 父组件传入的值
Prop 中是value时，data最好命名为 model,但命名为其他也可以达到效果，
需要在:注意⚠️ 如果value是对象类型时，是不需要下面 $emit()

@Watch('model')
    onModelChange(val) {
        this.$emit('input',this.model)
    }

在父组件中调用

import Son from './Son.tsx'
....
render () {
        return (
            <div style={{width: '200px', height: '100px', border: '1px solid #333'}}>
                 <Son v-model={this.str}  data={this.arrList} ></Son>
            </div>
        )
    }