vue-渲染和jsx-2020-07-13

如果生活真的失去了什么，也不必介怀，因为他已经真的失去了

本文记录了vue中使用渲染和jsx的基础使用，更多深入研究待后续项目使用过程中

使用渲染

这里统一采用vue-cli工具，

➜  hello-world git:(master) ✗ vue -V
@vue/cli 4.4.6

vue版本是2.6.0
1.添加一个组件，内容为

export default {
  props: {
    level: {
      type: Number,
      required: true
    }
  },
  render: function(createElement) {
    return createElement(
      'h' + this.level,   // 标签名称
      this.$slots.default // 子节点数组
    )
  }
}

在页面中引用

import ele from './components/VueJsx.vue';
//注册组件
export default {
  components: {
    ele
  }
//省略部分业务代码
}

<ele v-bind:level="3">
  哈哈哈
</ele>

运行效果

image.png

组件中根据引用传入的 props参数level来决定渲染h标题，这里传入了3，渲染在页面的就是h3，里面的文字是这样带过来的，引用官网

image.png

使用JSX

1.安装jsx需要的依赖

npm install\
  babel-plugin-syntax-jsx\
  babel-plugin-transform-vue-jsx\
  babel-helper-vue-jsx-merge-props\
  babel-preset-env\
  --save-dev

2.配置babel插件
vue-cli的4.x项目结构中，找到babel.config.js

image.png
修改内容如下

module.exports = {
  presets: [
    // '@vue/cli-plugin-babel/preset',
    '@vue/babel-preset-jsx'
  ],
  "plugins": ["transform-vue-jsx"]
}

3.编写jsx组件文件

<script type="text/jsx" >
export default {
  render (h) {
    return h('div', {
      props: {
        msg: 'hi'
      },
      style: {
        color: 'red',
        fontSize: '14px'
      },
      slot: 'slot'
    }, this.$slots.default)
  }
}
</script>

这里用了jsx的语法，jsx的github地址
https://github.com/vuejs/babel-plugin-transform-vue-jsx
意思是创建一个div里面同样包含了 $slots.default，并且添加了样式等
4.引用

import jsxdemo from './components/JsxDemo.vue';
//注册组件
export default {
  components: {
    jsxdemo
  }
//省略部分业务代码
}

5.在页面中引用

<jsxdemo v-bind:level="3" >
      嘿哈
    </jsxdemo>

6.运行效果

image.png

可以看到，我们在组建中添加的style样式也一并被生成进去了
值得注意的是，vue2.x和3.x对于jsx的支持不一样，这一点，在官方的github声明中也有提到

到此，vue中的渲染和jsx基础使用就完成了

参考文章
https://cn.vuejs.org/v2/guide/render-function.html#JSX
https://github.com/vuejs/babel-plugin-transform-vue-jsx
https://www.cnblogs.com/jehorn/p/11346358.html