先说一下 element 中 Message 消息提示，MessageBox 弹框，Notification 通知组件怎么插入自定义的HTML？用 JSX 的方式怎么实现以及 vue 项目中怎么使用 JSX ？ 我拿 element 组件中常用的 Notification 组件举例，在项目中怎么使用 JSX 以及怎么用 $createElement. 昨天用到通知消息组件，想自定义HTML放在 message 中：
this.$notify({ message: `<div onclick="handleClick">查看详情</div>`, dangerouslyUseHTMLString: true }); 刚看是没有注意 createElement 的方式，发现如果按照我上面这么写，在 vue 中肯定不能实现。接下来用 createElement 的方式创建 const h = this.$createElement; this.$notify({ title: '这是提示标题', message: h('div', { on: { click: handleClick }, '查看详情'), dangerouslyUseHTMLString: true, }); 以上面那种方式创建但是 如果我们有多个嵌套的标签，需要怎么创建 const h = this.$createElement; this.$notify({ title: '这是提示标题', message: h('div', null, [ '这是一个段文字', h('a', { attrs: { href: 'https://www.jianshu.com/u/639201a5d397' , target: '_blank' } }, [ h('el-button', { style: { marginLeft: '20px' }, attrs: { size: 'small', type: 'primary' }, on: { click: this.handleClick } }, '查看详情') ] ) ]), dangerouslyUseHTMLString: true, });页面效果
image.png
但这种方式还有一个弊端，如果有多个嵌套层，写起来相当复杂和混乱，接下来就用 JSX 的方式重新上面代码。
首先 vue 中默认是不支持 JSX 的，我们需要在项目中安装一些 npm 包 npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props 然后在 .babelrc 文件中加入，如果没有这个文件，需要在项目的根路径创建这个文件 { "presets": ["@vue/babel-preset-jsx"] } 重新上面的 message 中的代码： message: ( <div onClick={this.handleClick}> 这是一段文字 <a target='_blank' href='https://www.jianshu.com/u/639201a5d397'> <el-button size="small" type="primary">查看详情</el-button> </a> </div> ), JSX 的方式还是减少了很多的代码量的，如果你对 react 了解的话，基本无压力上手就能写。vue官网对 JSX 的介绍以及 createElement 的使用方式
轉載出處
