在Vue

Question

我正在构建一个Laravel / 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部分的整个标记根本不会呈现。

我尝试将require组件的CompanyLogo添加到LogoUploader组件的注册中，但这也不起作用。

如果我拆分他们出现的组件。问题只有在它们嵌套时才会出现。

有什么想法吗？

Answer 1

Vue实例和组件必须具有单个根元素。在--version中，您有两个根元素。

您需要将它们包装在根目录中。

LogoUploader