UI组件库-Tab组件（jsx）

其实一直想绕过jsx，原计划是先在react里面带大家用上jsx，vue里面就不涉及了。昨天经过一番折腾，实在是在vue组件的<template>里面不能很满意的实现想要的效果，其实我对自己和大家的要求不高，只是说咱们的代码在完成其功能的前题下，要容易阅读，易于理解。

在实现Tab组件的时候，我觉得自己不能达到这个要求，在参考了各种源码后，终于还是决定在项目中使用jsx。

jsx的视频已经发给大家（也可以在react合集里面找到），虽然是在react的环境下但是区别不大，大家先看一下，掌握基本用法，后面用的多了，就没有障碍了。

一、vue 项目引入 jsx 支持

这个官方文档有详细的说明，可以直接查阅，下面简单记录下

// 安装依赖npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props --save-dev// 配置 babel，如果没有就新建 .babelrc 文件{  "presets": ["@vue/babel-preset-jsx"]}

二、vue 组件的写法的变化

一个 vue 组件，其中要求 <template> 标签和 render() 方法二选一，在使用 render() 的时候，其实文件名都可以改为 .js 形如下面的样子

// tabs.jsexport default {  data() {    return {}  },  mounted() {},  methods: {},  render(h) {}  ...}

但是，我们的 Tab 组件还是有一些样式要考虑的，上面这样的方式就不方便了，改为如下的形式：

// tabs.vue<script>export default {  data() {    return {}  },  mounted() {},  methods: {},  render(h) {}  ...}</script><style lang="sass" scoped></style>

这样我们就兼顾了 render() 和我们的样式

三、用 jsx 的方式实现我们之前的 tab组件结构

UI组件库-Tab组件（jsx）

如上图，这是我们改造前组件的 <template> 中的结构，现在修改成 jsx 的方式，如下图

UI组件库-Tab组件（jsx）

具体的实现过程，这里就不重复说了，分享的时候已经很仔细的带大家做了，这里要提醒大家注意的是 children 还有 jsx 的各种写法。

四、组件用法

组件完成后，我们就可以在需要的地方很简便的使用了，因为是参考 Element 的 api，所以大家用起来也会比较自然

UI组件库-Tab组件（jsx）

和 Element 的 tab 组件一样，一个 v-model 指定被激活的 tab，<Tab> 组件的 label 属性设置 tab 标签上的文字，<Tab> 组件中的内容，就是 tab 标签页对应的主体内容，<Tab> 的 name 属性用于区分不同的 tab。

上图中的按钮是我做的一个实验，为了证明按钮的事件可以被调用。

<Tab> 组件的内容没有贴出来，很简单，就是一个 li，按 Bulma 的要求写就行。

END