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

  • Post author:
  • Post category:vue


先说一下 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 的使用方式



轉載出處