• 后备内容

    后备内容

    有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。例如在一个 <submit-button> 组件中：

    1. <button type="submit">
    2.   <slot></slot>
    3. </button>

    我们可能希望这个 <button> 内绝大多数情况下都渲染文本“Submit”。为了将“Submit”作为后备内容，我们可以将它放在 <slot> 标签内：

    1. <button type="submit">
    2.   <slot>Submit</slot>
    3. </button>

    现在当我在一个父级组件中使用 <submit-button> 并且不提供任何插槽内容时：

    1. <submit-button></submit-button>

    后备内容“Submit”将会被渲染：

    1. <button type="submit">
    2.   Submit
    3. </button>

    但是如果我们提供内容：

    1. <submit-button>
    2.   Save
    3. </submit-button>

    则这个提供的内容将会被渲染从而取代后备内容：

    1. <button type="submit">
    2.   Save
    3. </button>