在Vue中写TSX有哪些需要注意的地方
目录
v-html
使用domPropsInnerHTML
来替代v-html
<main domPropsInnerHTML={this.topicDetail.content} class="markdown-body" > loading... </main>
v-if
使用三元操作符来替代v-if
{this.preFlag ? <button class="pageBtn">......</button> : ""}
v-for
使用map
遍历替代v-for
{this.pageBtnList.map(page => { return ( <button onClick={this.changePageHandler.bind(this, page)} class={[{ currentPage: page === this.currentPage }, "pageBtn"]} > {page} </button> ); })}
render
注意:在render
函数中的组件名一定用kebab-case
命名
protected render() { return ( <footer> <hello-word /> <p> © 2020 Designed By Enoch Qin <a href="https://mybj123.com/" target="_blank"> 码云笔记 >> </a> </p> </footer> ); }
onClick 事件传值(TSX)
使用template
的时候,如果用v-on
绑定事件,想要传参的话,可以直接这么写:
<button @click="clickHandle(params)">click me</button>
但是在 TSX 中,如果直接这么写,就相当于立即执行了 clickHandle 函数:
render(){ // 这样写是不行的!! return <button onClick={this.clickHandler(params)}>click me</button> }
因此,我们不得不使用 bind()来绑定参数的形式传参:
render(){ return <button onClick={this.clickHandler.bind(this, params)}>click me</button> }
结语
以上就是今天码云笔记为大家带来的关于在 Vue 中写 TSX 有哪些需要注意的地方,纯个人自学笔记,希望对大家有帮助。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 在Vue中写TSX有哪些需要注意的地方
码云笔记 » 在Vue中写TSX有哪些需要注意的地方