處理本地組件與VUE

Question

我有以下代碼：

<my-messages> 
    <message>Hello</message> 
    <message>World</message> 
</my-messages> 

現在，我做了我<my-messages>組件來renderized爲：

<div class="Messages"> 
    <!-- slot here --> 
</div> 

而且我喜歡爲<message>做同樣的，但問題是我收到錯誤Unknown custom element: <message>。除非我我的代碼更改爲：

<my-messages inline-template> 
    <message>Hello</message> 
</my-messages> 

這似乎有點劈，一旦我應該聲明[inline-template]所有<my-messages>組件，而不是將其從該組件的默認規則（例如直接處理的。選項爲inlineTemplate: true應該做的工作，如果存在）。

預期的渲染應該是這樣的：

<div class="Messages"> 
    <div class="message">Hello</div> 
    <div class="message">World</div> 
</div> 

---

我目前組件：

export default { 
    components: { 
     // Should process <message> sub-component. 
     message: require('./Messages.Message.vue'), 
    } 
} 

---

編輯：在現實中，inline-template似乎從混合兩種<div>小號模板，而不是嵌套它。

Answer 1

inline-template不是黑客。我認爲問題在於您沒有在使用my-messages組件的相同位置註冊message組件。

所以有my-messages作爲一個孩子無法理解message父組件，你需要在家長進行註冊過，當您使用inline-template範圍的變化和所當內將被視爲內部內容。您可以在docs

編輯發現它

沒有辦法有<message>是唯一可用作的<my-messages>孩子，你可以然而拋出一個異常，如果它被濫用

mounted() { 
    if (!this.$parent.$el.classList.contains('my-message')) { 
    this.$destroy(); 
    throw new Error('You must wrap the message in a my-message'); 
    } 
} 

請注意，這假設my-message類在根元素中可用，這樣您可以使用任何包裝元素。