如何在Vue中書寫JSX

簡介

Vue中能夠經過render函數代替template來得到徹底的JavaScript編程能力。Vue官網上錨點標題的例子，說明了render函數在某些場景下能夠有效地簡化代碼。咱們能夠經過createElement函數來編寫render函數，可是createElement的寫法過於繁瑣，邏輯稍微複雜一點就會產生一堆代碼，並且不易閱讀。官方文檔中指出能夠經過Babel插件，在render函數中使用JSX語法，讓代碼更接近模板語法。Babel轉化插件官方文檔已經對JSX語法進行了說明，本文將結合實例說明如何在Vue中書寫JSX。

創建demo項目

經過Vue CLI快速建立demo項目

vue create learn-vue-jsx
複製代碼

默認的@vue/babel-preset-app已經包含了轉化JSX語法的插件

@babel/plugin-syntax-jsx
babel-helper-vue-jsx-merge-props
babel-plugin-transform-vue-jsx
複製代碼

引入element-ui庫，對在使用第三方庫中涉及JSX的用法進行說明

vue add element
複製代碼

書寫JSX

從最簡單的例子開始，template版本和render函數版本的Hello World

template版本

<template>
  <p
    id="helloWorld"
    :class="{'hello-world': true}"
    :style="{'color': 'red'}"
    @click="onClick">
    {{this.msg}}
  </p>
</template>
<script>
export default {
  data() {
    return {
      msg: 'Hello World'
    }
  },
  methods: {
    onClick() {
      alert('Hello World');
    }
  }
}
</script>
複製代碼

render函數版本

<script>
export default {
  data() {
    return {
      msg: 'Hello World'
    }
  },
  methods: {
    onClick() {
      alert('Hello World');
    }
  },
  render() {
    return (
      <p 
        id="helloWorld"
        class={{'hello-world': true}}
        style={{'color': 'red'}}
        onClick={this.onClick}>
        {this.msg}
      </p>
    );
  }
}
</script>
複製代碼

使用第三方庫

1. 使用element-ui的el-button組件

template版本

<el-button
  size="medium"
  type="primary"
  round
  loading>
  按鈕
</el-button>
複製代碼

render函數版本

render() {
  return (
    <el-button
      type="primary"
      size="medium"
      round
      loading>
      按鈕
    </el-button>
  );
}
複製代碼

效果以下:

由於在全局加載了 element-ui庫，因此在 JSX中能夠識別 el-button組件。若是是本身編寫的控件，須要在 components中引入該控件，或者像 babel-plugin-transform-vue-jsx文檔中介紹的，直接在 render函數中使用import進來的控件，注意這裏使用的控件 首字母必須是 大寫的，插件才能識別。

import MyButton from './MyButton';
export default {
  render() {
    return (
      <MyButton>按鈕</MyButton>
    );
  }
};
複製代碼

2. 使用element-ui的el-input組件

template版本

<div>
  <el-input
    v-model="input"
    placeholder="請輸入內容">
  </el-input>
  <p>{{input}}</p>
</div>
複製代碼

render函數版本

methods: {
  onInput(value) {
    this.input = value;
  }
},
render() {
  return (
    <div>
      <el-input
        value={this.input}
        placeholder="請輸入內容"
        onInput={this.onInput}>
      </el-input>
      <p>{this.input}</p>
    </div>
  );
}
複製代碼

大部分的Vue的內置指令在JSX都是不支持的，因此須要用其餘方式實現。像v-model指令實際上是value屬性和input事件的語法糖。v-if指令可使用if語句實現，v-for指令可使用array.map語句實現。比較例外的是v-show指令能夠在JSX使用。具體例子以下:

template版本

<div>
  <p>v-if指令</p>
  <div v-if="isIf">v-if指令內容</div>
  <p>v-for指令</p>
  <div v-for="item in list">{{item}}</div>
  <p>v-show指令</p>
  <div v-show="isShow">v-show指令內容</div>
</div>
複製代碼

render函數版本

render() {
  return (
    <div>
      <p>v-if指令</p>
      {
        this.isIf ? <div>v-if指令內容</div> : ''
      }
      <p>v-for指令</p>
      <div>
      {
        this.list.map((item) => {
          return item
        })
      }
      </div>
      <p>v-show指令</p>
      <div v-show="isShow">v-show指令內容</div>
    </div>
  );
}
複製代碼

3. 使用element-ui的el-loading組件

在JSX中使用自定義指令傳遞argument和modifiers的寫法比較繁瑣，以el-loading組價的指令方式爲例:

template版本

<el-button
  type="primary"
  @click="openFullScreen"
  v-loading.fullscreen.lock="fullscreenLoading">
  全屏Loading
</el-button>
複製代碼

render函數版本

render() {
  const directives = [
    { 
      name: 'loading',
      value: this.fullscreenLoading,
      modifiers: { fullscreen: true, lock: true } 
    }
  ];
  return (
    <el-button
      type="primary"
      onClick={this.openFullScreen}
      {...{ directives}}>
      全屏Loading
    </el-button>
  );
}
複製代碼

babel-plugin-transform-vue-jsx在官方文檔中還介紹了另外一種書寫Vue指令的方法，可是嘗試只有v-loading={this.fullscreenLoading}這種寫法是生效的，不能設置argument和modifiers等參數。

4. 使用element-ui的el-table組件

el-table組件提供了自定義表頭和自定義列模板的能力，能夠經過自定義插槽實現。具體例子以下:

template版本

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="日期" prop="date"></el-table-column>
    <el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column>
      <template slot="header">
        <el-input v-model="search" size="mini" placeholder="輸入關鍵字搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1516 弄'
        }
      ],
      search: ""
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  }
};
</script>
複製代碼

render函數版本

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1516 弄'
        }
      ],
      search: ''
    };
  },
  methods: {
    updateSearch(value) {
      this.search = value;
    },
    handleEdit(index, row) {
      return () => {
        console.log(index, row);
      };
    },
    handleDelete(index, row) {
      return () => {
        console.log(index, row);
      };
    }
  },
  render() {
    let that = this;
    return (
      <el-table data={this.tableData} style={{ width: '100%' }}>
        <el-table-column label="日期" prop="date"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column {...{
          scopedSlots: {
            header: scope => {
              return (
                <el-input size="mini" placeholder="輸入關鍵字搜索" value={that.search} onInput={that.updateSearch}/>
              );
            },
            default: scope => {
              return [
                <el-button size="mini" onClick={that.handleEdit(scope.$index, scope.row)}>編輯</el-button>,
                <el-button size="mini" type="danger" onClick={that.handleDelete(scope.$index, scope.row)}>刪除</el-button>
              ];
            }
          }
        }}>
        </el-table-column>
      </el-table>
    );
  }
};
</script>
複製代碼

這個例子比較複雜，主要涉及了v-model指令、做用域插槽、事件內聯處理等。v-model指令經過設置value屬性和監聽input事件來實現。做用域插槽的JSX寫法能夠參考官網渲染函數 & JSX的插槽章節進行理解。網上一直沒有找到對於事件內聯處理的JSX寫法介紹，若是按照template模板的方式編寫事件內聯處理，即相似這種格式onClick={that.handleEdit(scope.$index, scope.row)}，會發如今第一次渲染時就觸發了事件回調方法，並有click回調事件沒有指定的報錯。控制檯輸出結果以下：

經過簡單改寫事件回調方法，將事件處理的過程放入一個匿名函數並返回，就能夠實現事件內聯處理的效果。