JSX 是一種 Javascript 的語(yǔ)法擴(kuò)展，JSX = Javascript + XML，即在 Javascript 里面寫(xiě) XML，因?yàn)?JSX 的這個(gè)特性，所以他即具備了 Javascript 的靈活性，同時(shí)又兼具 html 的語(yǔ)義化和直觀性

有時(shí)候，我們使用渲染函數(shù)（render function）來(lái)抽象組件，渲染函數(shù)不是很清楚的參見(jiàn)官方文檔, 而渲染函數(shù)有時(shí)候?qū)懫饋?lái)是非常痛苦的

createElement( ’anchored-heading’, { props: { level: 1 } }, [ createElement(’span’, ’Hello’), ’ world!’ ])

其對(duì)應(yīng)的模板是下面：

<anchored-heading :level='1'> <span>Hello</span> world!</anchored-heading>

這顯然是吃力不討好的，這個(gè)時(shí)候就派上 JSX 上場(chǎng)了。在 Vue 中使用 JSX，需要使用 Babel 插件，它可以讓我們回到更接近于模板的語(yǔ)法上，接下來(lái)就讓我們一起開(kāi)始在 Vue 中寫(xiě) JSX 吧

快讀創(chuàng)建一個(gè) Vue 項(xiàng)目，直接使用 vue-cli 創(chuàng)建一個(gè)項(xiàng)目：

# 直接回車(chē)即可vue create vue-jsx

安裝依賴(lài)：

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

配置 .babelrc ：

module.exports = { presets: [ ’@vue/cli-plugin-babel/preset’, [’@vue/babel-preset-jsx’, { ’injectH’: false }] ]}基礎(chǔ)內(nèi)容

這里展示在 Vue 中書(shū)寫(xiě)一些基礎(chǔ)內(nèi)容，包括純文本、動(dòng)態(tài)內(nèi)容、標(biāo)簽使用、自定義組件的使用，這些跟我們平時(shí)使用單文件組件類(lèi)似，如下所示：

render() { return ( <div> <h3>內(nèi)容</h3> {/* 純文本 */} <p>hello, I am Gopal</p> {/* 動(dòng)態(tài)內(nèi)容 */} <p>hello { this.msg }</p> {/* 輸入框 */} <input /> {/* 自定義組件 */} <myComponent></myComponent> </div> );}Attributes/Props

Attributes 的綁定跟普通的 HTML 結(jié)構(gòu)一樣

render() { return <div><input placeholder='111' /></div>}

注意，如果動(dòng)態(tài)屬性，之前是 v-bind:placeholder='this.placeholderText' 變成了placeholder={this.placeholderText}

render() { return <input type='email' placeholder={this.placeholderText} />}

我們也可以展開(kāi)一個(gè)對(duì)象

render (createElement) { return ( <button {...this.largeProps}></button> )}

像 input 標(biāo)簽，就可以如下批量綁定屬性

const inputAttrs = { type: ’email’, placeholder: ’Enter your email’};render() { return <input {...{ attrs: inputAttrs }} /> }插槽

我們來(lái)看下怎么實(shí)現(xiàn)具名插槽和作用域插槽

具名插槽：父組件的寫(xiě)法和單文件組件模板的類(lèi)似，通過(guò) slot='header' 這樣方式指定要插入的位置。子組件通過(guò) this.$slots.header 方式指定插槽的名稱(chēng)，其中 header 就是插槽的名稱(chēng)

父組件：

render() { {/* 具名插槽 */} <myComponent> <header slot='header'>header</header> <header slot='content'>content</header> <footer slot='footer'>footer</footer> </myComponent>}

子組件：

render() { return ( <div> {/* 純文本 */} <p>我是自定義組件</p> {this.$slots.header} {this.$slots.content} {this.$slots.footer} </div> );}

作用域插槽：子組件中通過(guò) {this.$scopedSlots.test({ user: this.user })} 指定插槽的名稱(chēng)是 test，并將 user 傳遞給父組件。父組件在書(shū)寫(xiě)子組件標(biāo)簽的時(shí)候，通過(guò) scopedSlots 值指定插入的位置是 test，并在回調(diào)函數(shù)獲取到子組件傳入的 user 值

父組件：

render() { {/* 具名插槽 作用域插槽 */} <myComponent { ...{ scopedSlots: { test: ({user}) => ( <div>{user.name}</div> ) } } }> </myComponent>

子組件：

render() { return ( <div> {this.$scopedSlots.test({ user: this.user })} </div> );}指令

常見(jiàn)的指令如下所示：

render() { {/* 指令 */} {/* v-model */} <div><input vModel={this.newTodoText} /></div> {/* v-model 以及修飾符 */} <div><input vModel_trim={this.tirmData} /></div> {/* v-on 監(jiān)聽(tīng)事件 */} <div><input vOn:input={this.inputText} /></div> {/* v-on 監(jiān)聽(tīng)事件以及修飾符 */} <div><input vOn:click_stop_prevent={this.inputText} /></div> {/* v-html */} <p domPropsInnerHTML={html} />}函數(shù)式組件

函數(shù)式組件是一個(gè)無(wú)狀態(tài)、無(wú)實(shí)例的組件，詳見(jiàn)官網(wǎng)說(shuō)明，新建一個(gè) FunctionalComponent.js 文件，內(nèi)容如下：

export default ({ props }) => <p>hello {props.message}</p>

父組件中調(diào)用如下:

import funComponent from ’./FunctionalComponent’...render() { return {/* 函數(shù)式組件 */} <funComponent message='Gopal'></funComponent>}

以上就是如何在 Vue 中使用 JSX的詳細(xì)內(nèi)容，更多關(guān)于Vue 中使用 JSX的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！