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

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

轉載出處