替代解决方案

Question

在Vue构造函数的template选项的Vue文档中，声明根元素的内容不会显示＆＃34;除非模板中存在内容分发插槽＆＃34 ; 。但是在尝试编写类似的内容时：

＆＃13;

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

＆＃13;

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

＆＃13;

根元素的内容不包含在内，正确的方法是什么？

或者在创建vue实例时以编程方式注入其他内容的建议方法是什么？

Answer 1

在某些方面，根的行为不像常规组件：您can't pass props，也不直接在其模板中使用<slot>（相关：vue/#4485）。

查看当前来源：$slots are resolved by resolveSlots function，resolveSlots点在根组件上调用$options._renderChildren为undefined }，所以没有解决任何插槽。在那之后并不重要，但是，有效的是，根组件永远不会填充其$options._renderChildren。

据说<slot>处理逻辑complicates things a bit，这可能是一个设计决定。

替代解决方案

通常用于处理您所要求的内容的模式只是将内容包装在另一个组件（比如<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>

了解如果this.$slots未填充为root用户，即使它在下面的演示中有<slot>。

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>

Vue：根元素内容和内容分发槽

1 个答案:

替代解决方案