vue 中 tsx的用法

2021-04-09阅读(2403)评论(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={this.enterPlaceholder}
                        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()
     }
}
v-model.trim 改写为 vModel_trim
赞(11) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » vue 中 tsx的用法
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏