这里以elementUi为例，同样适用于自定义组件

组件自带属性

boolean、string、number 类型的，直接用单花括号包裹即可 ,v-model也可以直接使用

以el-form表单为例

<el-form inline>
    <el-form-item label={this.label}>
        <el-input
            v-model={this.form.thematicName}
            placeholder="请输入"
            maxlength="30"
            show-word-limit
        ></el-input>
    </el-form-item>
</el-form>

array、object类型的，通过props传递

还是以el-form为例，

template写法，绑定表单数据时，通过:model 绑定

tsx写法如下：

<el-form props={{model:this.form}} labelWidth={this.labelWidth} ref="addTopic">
...
</el-form>

组件事件绑定、事件修饰符

把 @替换成 on，并将原来事件名的 首字母大写

例如 ：

@click  改写为 onClick

@tab-click 改写为 onTab-click  这里要注意下，不要把横线给去掉了，遵循上面的规则

修饰符

@submit.native.prevent=”submitFunction”  改写如下

nativeOnSubmit={(e:any) => this.submitFunction(e)}

然后在submitFunction中添加阻止默认行为

submitFunction(e?:any){
     if(e){
       e.preventDefault()
     }
}

插槽（Slots）

具名插槽(named slots):

render() {
  return (
    <MyComponent>
      <header slot="header">header</header>
      <footer slot="footer">footer</footer>
    </MyComponent>
  )
}

作用域插槽(scoped slots):

render() {
  const scopedSlots = {
    header: () => <header>header</header>,
    footer: () => <footer>footer</footer>
  }

  return <MyComponent scopedSlots={scopedSlots} />
}

指令(Directives)

<input vModel={this.newTodoText} />

<input vModel_trim={this.newTodoText} />

<input vOn:click={this.newTodoText} />

<input vOn:click_stop_prevent={this.newTodoText} />

<p domPropsInnerHTML={html} /> //v-html

函数式组件（Functional Components）

export default ({ props }) => <p>hello {props.message}</p>  //默认导出时

//或者
const HelloWorld = ({ props }) => <p>hello {props.message}</p>