在 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 部分的整个标记根本不会呈现。

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

如果我拆分它们都会显示的组件。问题仅在于它们嵌套后。

有什么想法吗？

Answer 1

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>