在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中嵌套自定义标签

回答

相关问题