JSX 是什么
JSX 是一種 Javascript 的語法擴展，JSX = Javascript + XML，即在 Javascript 里面寫 XML，因為 JSX 的這個特性，所以他即具備了 Javascript 的靈活性，同時又兼具 html 的語義化和直觀性
為什么要在 Vue 中使用 JSX
有時候，我們使用渲染函數(shù)（render function）來抽象組件，渲染函數(shù)不是很清楚的參見官方文檔, 而渲染函數(shù)有時候?qū)懫饋硎欠浅Ｍ纯嗟?/p>
|
1
2
3
4
5
6
7
8
9
10
|
createElement( 'anchored-heading', { props: { level: 1 } }, [ createElement('span', 'Hello'), ' world!' ]) |
其對應(yīng)的模板是下面：
|
1
2
3
|
<anchored-heading :level="1"> <span>Hello</span> world!</anchored-heading> |
這顯然是吃力不討好的，這個時候就派上 JSX 上場了。在 Vue 中使用 JSX，需要使用 Babel 插件，它可以讓我們回到更接近于模板的語法上，接下來就讓我們一起開始在 Vue 中寫 JSX 吧
開始
快讀創(chuàng)建一個 Vue 項目，直接使用 vue-cli 創(chuàng)建一個項目：
|
1
2
|
# 直接回車即可vue create vue-jsx |
安裝依賴：
|
1
|
npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props |
配置 .babelrc ：
|
1
2
3
4
5
6
7
8
9
|
module.exports = { presets: [ '@vue/cli-plugin-babel/preset', ['@vue/babel-preset-jsx', { 'injectH': false }] ]} |
基礎(chǔ)內(nèi)容
這里展示在 Vue 中書寫一些基礎(chǔ)內(nèi)容，包括純文本、動態(tài)內(nèi)容、標(biāo)簽使用、自定義組件的使用，這些跟我們平時使用單文件組件類似，如下所示：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
render() { return ( <div> <h3>內(nèi)容</h3> {/* 純文本 */} <p>hello, I am Gopal</p> {/* 動態(tài)內(nèi)容 */} <p>hello { this.msg }</p> {/* 輸入框 */} <input /> {/* 自定義組件 */} <myComponent></myComponent> </div> );} |
Attributes/Props
Attributes 的綁定跟普通的 HTML 結(jié)構(gòu)一樣
|
1
2
3
|
render() { return <div><input placeholder="111" /></div>} |
注意，如果動態(tài)屬性，之前是 v-bind:placeholder="this.placeholderText" 變成了placeholder={this.placeholderText}
|
1
2
3
4
5
6
|
render() { return <input type="email" placeholder={this.placeholderText} />} |
我們也可以展開一個對象
|
1
2
3
4
5
|
render (createElement) { return ( <button {...this.largeProps}></button> )} |
像 input 標(biāo)簽，就可以如下批量綁定屬性
|
1
2
3
4
5
6
7
|
const inputAttrs = { type: 'email', placeholder: 'Enter your email'};render() { return <input {...{ attrs: inputAttrs }} /> } |
插槽
我們來看下怎么實現(xiàn)具名插槽和作用域插槽
具名插槽：父組件的寫法和單文件組件模板的類似，通過 slot="header" 這樣方式指定要插入的位置。子組件通過 this.$slots.header 方式指定插槽的名稱，其中 header 就是插槽的名稱
父組件：
|
1
2
3
4
5
6
7
8
|
render() { {/* 具名插槽 */} <myComponent> <header slot="header">header</header> <header slot="content">content</header> <footer slot="footer">footer</footer> </myComponent>} |
子組件：
|
1
2
3
4
5
6
7
8
9
10
11
|
render() { return ( <div> {/* 純文本 */} <p>我是自定義組件</p> {this.$slots.header} {this.$slots.content} {this.$slots.footer} </div> );} |
作用域插槽：子組件中通過 {this.$scopedSlots.test({ user: this.user })} 指定插槽的名稱是 test，并將 user 傳遞給父組件。父組件在書寫子組件標(biāo)簽的時候，通過 scopedSlots 值指定插入的位置是 test，并在回調(diào)函數(shù)獲取到子組件傳入的 user 值
父組件：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
render() { {/* 具名插槽 作用域插槽 */} <myComponent { ...{ scopedSlots: { test: ({user}) => ( <div>{user.name}</div> ) } } }> </myComponent> |
子組件：
|
1
2
3
4
5
6
7
8
9
|
render() { return ( <div> {this.$scopedSlots.test({ user: this.user })} </div> );} |
指令
常見的指令如下所示：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
render() { {/* 指令 */} {/* v-model */} <div><input vModel={this.newTodoText} /></div> {/* v-model 以及修飾符 */} <div><input vModel_trim={this.tirmData} /></div> {/* v-on 監(jiān)聽事件 */} <div><input vOn:input={this.inputText} /></div> {/* v-on 監(jiān)聽事件以及修飾符 */} <div><input vOn:click_stop_prevent={this.inputText} /></div> {/* v-html */} <p domPropsInnerHTML={html} />} |
函數(shù)式組件
函數(shù)式組件是一個無狀態(tài)、無實例的組件，詳見官網(wǎng)說明，新建一個 FunctionalComponent.js 文件，內(nèi)容如下：
|
1
|
export default ({ props }) => <p>hello {props.message}</p> |
父組件中調(diào)用如下:
|
1
2
3
4
5
6
7
8
|
import funComponent from './FunctionalComponent'...render() { return {/* 函數(shù)式組件 */} <funComponent message="Gopal"></funComponent>} |
以上就是如何在 Vue 中使用 JSX的詳細(xì)內(nèi)容，更多關(guān)于Vue 中使用 JSX的資料請關(guān)注服務(wù)器之家其它相關(guān)文章！
原文鏈接：https://www.cnblogs.com/vickylinj/p/14384315.html
