在Vue中嵌套自定義標籤

我有一個正在構建的Laravel/Vue應用程序，並且遇到了一些問題。我已經能夠成功地創建單獨的獨立組件，但是當我嘗試將獨立組件嵌套到另一個組件中時，只有嵌套組件出現。代碼位：在Vue中嵌套自定義標籤

CompanyLogo.vue

<template> 
    <figure class="company-logo" :style="{ 
    width: size, 
    height: size, 
    backgroundImage: `url(${src})` 
    }"></figure> 
</template>

LogoUploader.vue

<template> 
    <div class="logo-container"> 
     <company-logo size="65px" :src="`${company.logo.url}`"></company-logo> 
    </div> 
    <div class="logo-uploaded-details"> 
     <p>Last updated: {company.logo.last_updated}</p> 
     <button class="file-browse-btn">Upload Image</button> 
    </div> 
</template>

發生了什麼事是，當company.blade.php我只是有

<logo-uploader></logo-uploader>

該應用程序編譯和加載，但只有CompanyLogo顯示在屏幕上。 logo-uploaded-details部分的整個標記完全不呈現。

我曾嘗試將CompanyLogo組件的require添加到LogoUploader組件的註冊中，但這也不起作用。

如果我拆分出它們都顯示的組件。這個問題只有一次嵌套。

任何想法？

來源

2017-07-28 matcartmill

Vue實例和組件必須具有單個根元素。在你的LogoUploader你有兩個根元素。

您需要將它們包裝在根中。

<template> 
    <div> 
    <div class="logo-container"> 
     <company-logo size="65px" :src="`${company.logo.url}`"></company-logo> 
    </div> 
    <div class="logo-uploaded-details"> 
     <p>Last updated: {company.logo.last_updated}</p> 
     <button class="file-browse-btn">Upload Image</button> 
    </div> 
    </div> 
</template>

來源

2017-07-28 03:23:37 Bert

哦，哇。我不敢相信我不知道這一點。所有這一次，我很幸運，其餘的組件都有一個根元素。謝謝你，男人！ – matcartmill

@matcartmill我實際上找不到它的文檔，但一旦它被你咬了幾次，你就會記得:) – Bert

在Vue中嵌套自定義標籤

回答

相關問題