Vue: 根元素内容与内容分发插槽

Question

Vue: 根元素内容与内容分发插槽

9

在Vue构造函数的template选项的文档中，指出根元素的内容不会显示，除非模板中存在内容分发插槽。但是，如果尝试编写以下内容：

new Vue({
  el: '#app',
  template: `
    <div>
      <h1>App title</h1>
      <slot></slot>
    </div>
  `
});

<html>

<body>
  <div id="app">
    App content
  </div>
  <script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
</body>

</html>

根元素的内容未包含在内，应该如何正确处理？

或者在创建Vue实例时，何种方式是建议的以编程方式注入附加内容？

- u.dev

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- acdcjunior · Accepted Answer

在某些方面，根组件的行为不像常规组件：您无法传递props，也不能直接在其模板中使用<slot>（相关信息：vue/#4485）。

请看当前源代码： $slots 由 resolveSlots 函数解析，并且在根组件上调用resolveSlots 时，它的$options._renderChildren 是undefined，因此没有解析插槽。虽然在那之后这并不重要，但实际上，根组件从未填充其$options._renderChildren。

有人说<slot>处理逻辑使事情变得复杂了一些，所以这可能是一个设计决策。

替代方案

常用于处理您所要求的模式是将内容包装在另一个组件（比如 <app>）中，然后从那里开始。

Vue.component('app', {
  template: `<div>
    <h2>I'm the &lt;app&gt; component title</h2>
    <slot>app slot default text</slot>
  </div>`
});
new Vue({
  el: '#app'
});

<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
<div id="app">
  <app>
    I'm the contents of app's template and was declared in root
  </app>
</div>

请看下面的演示，即使根元素中有<slot>，this.$slots也没有填充。

Vue.component('app', {
  template: `<div>
    <h2>I'm the &lt;app&gt; component title</h2>
    <slot>app slot default text</slot>
  </div>`,
  created() {
    console.log("<app>'s VDOM children (LENGTH): ", this.$options._renderChildren.length);
    console.log("<app>'s slots (LENGTH): ", this.$slots.default.length);
  }
});
new Vue({
  el: '#app',
  created() {
    console.log("root's VDOM children: ", this.$options._renderChildren);
    console.log("root's slots: ", this.$slots);
  }
});

<script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script>
<div id="app">
  <app>
    I'm the contents of app's template
  </app>

  <slot>root's slot's default content, won't make it into $slots, check the console</slot>
</div>