vue 项目中使用 JSX 以及 $createElement 使用方式

Posted 2023-05-13

参考技术A 先说一下 element 中 Message 消息提示，MessageBox 弹框，Notification 通知组件怎么插入自定义的html？用 JSX 的方式怎么实现以及 vue 项目中怎么使用 JSX ？
我拿 element 组件中常用的 Notification 组件举例，在项目中怎么使用 JSX 以及怎么用 $createElement.
昨天用到通知消息组件，想自定义HTML放在 message 中：

vue官网对 JSX 的介绍以及 createElement 的使用方式

vue使用jsx语法开发

最近遇到这样一个问题：原本用vue-cli2创建的项目，需要用vue-cli3重构。入口文件声明实例时候，使用的是render模式，而不是模板template。

new Vue({
  router,
  render: h => h(App)
}).$mount(‘#app‘)

而在我们原有的项目中，一些封装的组件必须使用template这个字段。然后发现在vue-cli3给出使用template的警告。然而，切换为template模式之后，组件就不能用了。

而使用render替代template因为模板代码比较多，导致写起来非常麻烦。

庆幸的是，最后终于发现了jsx方案：

用jsx代替template，发现转换非常方便。

具体使用jsx的语法，可以参考babel-plugin-transform-vue-jsx插件。

总结一下：Vue写模板的方式有render、template和jsx。