Vue元素未显示

Question

我正在尝试使用 HTML 正文中的 template 元素创建 Vue 元素。在我尝试将其中两个一起使用之前，它工作得很好。

<template id="root-template">
  <div>
    <app-navbar targetId="#app-sidenav" />
    <app-header />
  </div>
</template>

由于某种原因，注释掉app-navbar 会导致显示app-header，但是如果显示app-navbar，则根本不会显示app-header！这个完全把我难住了。

const Navbar = Vue.component("app-navbar", {
  name: "app-navbar",
  template: "#navbar-template",
  props: {
    targetId: {
      type: String,
      default: "#app-sidenav"
    }
  },
  mounted() {
    this.sidenav = M.Sidenav.init(document.querySelector(this.targetId));
  },
});

const Header = Vue.component("app-header", {
  name: "app-header",
  template: "#header-template"
});

const AppRoot = Vue.component("app-root", {
  template: "#root-template",
  components: {
    Navbar,
    Header
  },
});

const store = new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {}
});

const app = new Vue({
  el: "#app",
  store,
  render: h => h(AppRoot)
});

<script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&type=.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<ul class="sidenav" id="app-sidenav">
  <li><a href="#">Sass</a></li>
  <li><a href="#">Components</a></li>
  <li><a href="#">Javascript</a></li>
  <li><a href="#">Mobile</a></li>
</ul>
<div id="app" />
<template id="navbar-template">
  <nav>
    <div class="nav-wrapper container">
      <a href="#!" class="brand-logo">Logo</a>
      <a href="#" data-target="app-sidenav" class="sidenav-trigger">
        <i class="material-icons">menu</i>
      </a>
      <ul class="right hide-on-med-and-down">
        <li><a href="#">Sass</a></li>
        <li><a href="#">Components</a></li>
        <li><a href="#">Javascript</a></li>
        <li><a href="#">Mobile</a></li>
      </ul>
    </div>
  </nav>
</template>
<template id="header-template">
  <div class="section no-pad-bot" id="index-banner">
    <div class="container">
      <br /><br />
      <h1 class="header center orange-text">Todos</h1>
      <div class="row center">
        <h5 class="header col s12 light">
          A modern responsive front-end framework based on Material Design
        </h5>
      </div>
      <div class="row center">
        <a href="http://materializecss.com/getting-started.html" id="download-button"
          class="btn-large waves-effect waves-light orange">Get Started</a>
      </div>
      <br /><br />
    </div>
  </div>
</template>
<template id="root-template">
  <div>
    <app-navbar target-id="#app-sidenav" />
    <app-header />
  </div>
</template>

我还把它变成了Pen。谁能告诉我为什么会这样？

Answer 1

不要在常规 HTML 文件中使用自闭合标签。

如果您更改这些 HTML 行：

<app-navbar target-id="#app-sidenav" />
<app-header />

对这些：

<app-navbar target-id="#app-sidenav"></app-navbar>
<app-header></app-header>

它会起作用的。

Answer 2

如果您使用单文件方法，您应该将模板放入函数中。有关示例，请参见下面的代码。由于自关闭语法，模板无法正确解析，因此仅显示一个组件。当您使用模板字符串时，您可以从模板中获得预期的显示，您现在如何拥有它们。只需将它们放在组件函数的template: 中，如下所示：

const Navbar = Vue.component("app-navbar", { 
    name: "app-navbar", 
    template: 
      `
       <nav>
        <div class="nav-wrapper container">
          <a href="#!" class="brand-logo">Logo</a>
          <a href="#" data-target="app-sidenav" class="sidenav-trigger">
            <i class="material-icons">menu</i>
          </a>
          <ul class="right hide-on-med-and-down">
            <li><a href="#">Sass</a></li>
            <li><a href="#">Components</a></li>
            <li><a href="#">Javascript</a></li>
            <li><a href="#">Mobile</a></li>
          </ul>
        </div>
      </nav>
      `, 
    props: { 
      targetId: { 
        type: String, 
        default: "#app-sidenav" 
      } 
    },
    mounted() {
      this.sidenav = M.Sidenav.init(document.querySelector(this.targetId));
    },
});

const Header = Vue.component("app-header", {
  name: "app-header",
  template: 
    `
    <div class="section no-pad-bot" id="index-banner">
      <div class="container">
        <br /><br />
        <h1 class="header center orange-text">Todos</h1>
        <div class="row center">
          <h5 class="header col s12 light">
            A modern responsive front-end framework based on Material Design
          </h5>
        </div>
        <div class="row center">
          <a href="http://materializecss.com/getting-started.html" id="download-button"
            class="btn-large waves-effect waves-light orange">Get Started</a>
        </div>
        <br /><br />
      </div>
    </div>
    `
});

const AppRoot = Vue.component("app-root", {
  template: 
    `
    <div>
      <!--   Comment out the navbar to see the header. expected behavior is that both ar displayed   -->
      <app-navbar target-id="#app-sidenav" />
      <app-header />
    </div>
    `,
  components: { Navbar, Header },
});

store = new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {}
});

app = new Vue({
  el: "#app",
  store,
  render: h => h(AppRoot)
});

删除代码笔中的模板并将其添加到 JS 以查看它是否正常工作。或者，您可以对组件使用结束标记语法，但使用自结束标记并将显示位分隔到它们的函数中而不是一大堆 <template></template> 标记更易读和直观。只是我对更简洁代码的看法，因此请随意根据需要/需要使用任何一种方法。