Vue JS：使用组件在模板中呈现动态信息

Question

我正在使用egoist / vue-html插件来呈现HTML，它可以与标准HTML一起正常工作，但是在包含component标签时会失败。

例如，当在模板中包含“ Breadcrumb组件时，它就无法正常工作。 我究竟做错了什么？

到目前为止，这是我得到的：

<script>
import Breadcrumb from '~components/Breadcrumb'
import Vue from 'vue'
import HTML from 'vue-html'

Vue.use(HTML)

export default {
  data () {
    return {
      html: '<div><Breadcrumb/></div>'
    }
  },
  render (h) {
    return this.$html(this.html)
  },
  components: {
    Breadcrumb
  }
}
</script>

Answer 1

使用带连字符的组件名称。 根据规范草案 ：

自定义元素类型标识一个自定义元素接口，并且是一个字符序列， 必须与NCName产生的[XML-NAMES] 相匹配， 必须包含U + 002D HYPHEN-MINUS字符，并且不能包含任何大写ASCII字母[HTML]。 自定义元素类型不能为以下值之一：

• 注释XML
• 颜色轮廓
• 字体
• 字体-脸-src
• font-face-uri
• 字体格式
• 字体名称
• 缺失字形