关于js文件中, 直接返回html元素的问题

524 阅读1分钟

今天无意中发现, vant UI库 中的 Dialog.comfirm 这个方法传入的参数可以是html元素, 如下:

    confirmDelete(id) {
      this.$confirm({
        className: 'action_box',
        message: '确认要删除当前记录吗?',
        title: <div>1234</div>
      }).then(() => {
        this.deleteRecord(id)
      }).catch(() => {
        // on cancel
      })
    },

这是我删除记录调用的方法,一开始有想过如何在方法中自定义元素, '<div>321</div>' 这是最开始的写法,直接渲染出来的是字符串,有想过怎么把字符串render为html元素, 结果居然可以直接传入html元素。 但是我自己手动试了一下

    cbhtml() {
      return <div>321</div>
    },

把这个方法返回的值直接放在页面上, 类似 {{cbhtml()}},就会报错

Converting circular structure to JSON
    --> starting at object with constructor 'Vue'
    |     property '$options' -> object with constructor 'Object'
    |     property 'router' -> object with constructor 'VueRouter'
    --- property 'app' closes the circle

所以这是vant UI库内部实现的? 查了一下似乎也没有相关资料。