vue2中使用jsx簡單總結

Vue 中使用 JSX

1.開始

在 Vue 中使用 JSX，需要使用 Babel 插件，它可以讓我們回到更接近於模板的語法上

// 安裝依賴：
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
      }]
  ]
}

2.基礎內容

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

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

3.Attributes/Props

// 3.1 Attributes 的綁定跟普通的 HTML 結構一樣
render() {
  return <div><input placeholder="111" /></div>
}

// 3.2 注意，如果動態屬性，之前是 v-bind:placeholder="this.placeholderText" 變成了placeholder={this.placeholderText}
render() {
  return <input
            type="email"
            placeholder={this.placeholderText}
          />
}

// 3.3 我們也可以展開一個對象
render (createElement) {
    return (
        <button {...this.largeProps}></button>
    )
}

// 3.4 像 input 標簽，就可以如下批量綁定屬性
const inputAttrs = {
    type: 'email',
    placeholder: 'Enter your email'
};
render() {
  return <input {...{ attrs: inputAttrs }} /> 
}

4.插槽

具名插槽：父組件的寫法和單文件組件模板的類似，通過 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>
  );
}

5.指令

// 常見的指令如下所示：
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} />
}

6.函數式組件

// 函數式組件是一個無狀態、無實例的組件，詳見官網說明，新建一個 FunctionalComponent.js 文件，內容如下：
export default ({ props }) => <p>hello {props.message}</p>

// 父組件中調用如下:
import funComponent from './FunctionalComponent'
...
render() {
  return {/* 函數式組件 */}
        <funComponent message="Gopal"></funComponent>
}

7.常用的vue jsx寫法

// 7.1 v-for 可使用map方法進行循環操作：
<el-table>
  {
    this.fields.map(item => {
        return(
          <el-table-column prop={item.prop}></el-table-column>
        )
    })
  }
</el-table>

// 7.2 v-if 使用三目運算符或者if else
render(h){
  return (
    this.show ? <div>111</div> : <span>222</span>
  )
}
或
render(h){
  return (
    <div>
      {
        this.show && (<span>aaa</span>)
      }
      <span>bbb</span>
    </div>
  )
}

// 7.3 v-on @  常用的@click等事件
<div on-click={this.handleClick}></div>