vue 中 tsx的用法

2021-04-09阅读(7789)评论(0)牵着狗狗看MM

苏州实时公交查询

这里以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>

 

赞(14)
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » vue 中 tsx的用法
分享到: 更多 (0)