javascript - Vue.js 中内容分布的表未正确渲染

Question

我正在尝试创建一个几乎只是一个表格的组件并使用 content distribution在其中添加元素。

但由于某种原因，我的槽元素在表格之前呈现，所以我可能做错了什么。

这是根应用程序模板:

<div id="app">
  <my-comp>
    <row-comp></row-comp>
    <row-comp></row-comp>
  </my-comp>
</div>

这些是我的组件声明:

new Vue({
  el: '#app',
  components: {
    'my-comp': {
      template: '\
        <table> \
          <thead> \
          <tr> \
            <th>header</th> \
          </tr> \
        </thead> \
        <tbody> \
          <tr> \
            <td>parent row</td> \
          <tr> \
          <slot></slot> \
        </tbody> \
      </table>'
    },

    'row-comp': {
      template: '<tr><td>content</td></tr>'
    }
  }
})

这是 jsfiddle: https://jsfiddle.net/vxc0o3mf/

谢谢。

Answer 1

<table>不能包含 <tr> 以外的任何元素和其他特定于表的元素，因此在渲染您的 <slot> 时立即被移出表。这是一个很难解决的问题，基本上你必须使用合法的表元素 is="component"添加组件的属性:

<div id="app">
  <table>
    <thead is="header-comp"></thead>
    <tr is="row-comp"></tr>
  </table>
</div>

然后:

new Vue({
    el: '#app',
  components: {
    'row-comp': {
        template: '<tr><td>content</td></tr>'
    },
    'header-comp': {
      template:'<thead><tr><th>header</th></tr></thead>'
    }
  }
})

fiddle :https://jsfiddle.net/vxc0o3mf/2/

我知道这没有您正在寻找的全部功能，但您不能使用 <slot>带表格:(