JSX 是什麼

JSX 是一種 Javascript 的語法擴充套件，JSX = Javascript + XML，即在 Javascript 裡面寫 XML，因為 JSX 的這個特性，所以他即具備了 Javascript 的靈活性，同時又兼具 html 的語義化和直觀性

為什麼要在 Vue 中使用 JSX

有時候，我們使用渲染函式（render function）來抽象元件，渲染函式不是很清楚的參見官方文件,而渲染函式有時候寫起來是非常痛苦的

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

其對應的模板是下面：

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

這顯然是吃力不討好的，這個時候就派上 JSX 上場了。在 Vue 中使用 JSX，需要使用 Babel 外掛，它可以讓我們回到更接近於模板的語法上，接下來就讓我們一起開始在 Vue 中寫 JSX 吧

開始

快讀建立一個 Vue 專案，直接使用 vue-cli 建立一個專案：

# 直接回車即可
vue create vue-jsx

安裝依賴：

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
  }]
 ]
}

基礎內容

這裡展示在 Vue 中書寫一些基礎內容，包括純文字、動態內容、標籤使用、自定義元件的使用，這些跟我們平時使用單檔案元件類似，如下所示：

render() {
 return (
 <div>
  <h3>內容</h3>
  {/* 純文字 */}
  <p>hello,I am Gopal</p>
  {/* 動態內容 */}
  <p>hello { this.msg }</p>
  {/* 輸入框 */}
  <input />
  {/* 自定義元件 */}
  <myComponent></myComponent>
 </div>
 );
}

Attributes/Props

Attributes 的繫結跟普通的 HTML 結構一樣

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

注意，如果動態屬性，之前是 v-bind:placeholder="this.placeholderText" 變成了placeholder={this.placeholderText}

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

我們也可以展開一個物件

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

像 input 標籤，就可以如下批量繫結屬性

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

插槽

我們來看下怎麼實現具名插槽和作用域插槽

具名插槽：父元件的寫法和單檔案元件模板的類似，通過 slot="header" 這樣方式指定要插入的位置。子元件通過 this.$slots.header 方式指定插槽的名稱，其中 header 就是插槽的名稱

父元件：

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>
 );
}

作用域插槽：子元件中通過 {this.$scopedSlots.test({ user: this.user })} 指定插槽的名稱是 test，並將 user 傳遞給父元件。父元件在書寫子元件標籤的時候，通過 scopedSlots 值指定插入的位置是 test，並在回撥函式獲取到子元件傳入的 user 值

父元件：

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

子元件：

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

指令

常見的指令如下所示：

render() {
 {/* 指令 */}
 {/* v-model */}
 <div><input vModel={this.newTodoText} /></div>
 {/* v-model 以及修飾符 */}
 <div><input vModel_trim={this.tirmData} /></div>
 {/* v-on 監聽事件 */}
 <div><input vOn:input={this.inputText} /></div>
 {/* v-on 監聽事件以及修飾符 */}
 <div><input vOn:click_stop_prevent={this.inputText} /></div>
 {/* v-html */}
 <p domPropsInnerHTML={html} />
}

函式式元件

函式式元件是一個無狀態、無例項的元件，詳見官網說明，新建一個 FunctionalComponent.js 檔案，內容如下：

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

父元件中呼叫如下:

import funComponent from './FunctionalComponent'

...

render() {
 return {/* 函式式元件 */}
  <funComponent message="Gopal"></funComponent>
}

以上就是如何在 Vue 中使用 JSX的詳細內容，更多關於Vue 中使用 JSX的資料請關注我們其它相關文章！