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
• 字體格式
• 字體名稱
• 缺失字形