可插槽元素有哪些？能否用<tr>作命名插槽及后备内容？

嘿，我来帮你理清这两个Vue插槽相关的问题：

Vue的插槽可以容纳几乎所有合法的Vue模板内容，常见的包括：

• 普通文本、原生HTML标签（比如<div>、<span>、<p>这类常规元素）
• 自定义Vue组件（不管是你自己写的还是第三方库提供的）
• 动态绑定内容（比如用{{ user.name }}展示的数据，或者v-bind绑定的属性）
• 指令类内容（v-if/v-for这类流程控制指令，v-on绑定的事件）
• 多根内容片段：Vue 3直接支持多个根元素作为插槽内容；Vue 2.x则需要用<template>标签包裹起来，规避单根限制

能不能用<tr>做命名插槽内容？ #

完全可以，但有个关键前提：组件内部的插槽出口（<slot>标签）必须放在<table>的合法嵌套位置里（比如<tbody>、<thead>、<tfoot>内部）。

举个例子，你的示例代码里<x-table>组件如果内部是这么写的：

<table>
  <tbody>
    <slot name="x-row"></slot>
  </tbody>
</table>

那父组件传入的<tr slot="x-row"><td>data</td></tr>就会被正确渲染成表格里的一行，完全符合HTML结构规范，浏览器能正常解析。

把<tr>作为后备内容的效果 #

后备内容是当父组件没有提供对应插槽内容时，组件会显示的默认内容。这里的效果同样取决于插槽出口的位置：

• 如果插槽出口在<table>的合法位置（比如<tbody>里）：

  <table>
    <tbody>
      <slot name="x-row">
        <tr><td>默认数据行</td><td>默认数据</td></tr>
      </slot>
    </tbody>
  </table>
  

  当父组件没传x-row插槽内容时，这个默认的<tr>会正常显示为表格的一行，结构和样式都没问题。
• 如果插槽出口放在了<table>外部（比如直接在<div>里）：
  这个默认的<tr>会因为脱离了表格的上下文，被浏览器当作无效结构，直接渲染到表格外面，导致布局混乱，样式也完全不符合表格行的预期。

内容的提问来源于stack exchange，提问作者stigmergy