替换插槽指令的Vue.js v-slot指令

Question

我正在尝试模仿在父组件中使用slot标记的默认行为。当我使用<template v-slot>时，内容不会自动转到那里。在不使用slot标签的情况下，正确的方法是什么?因为我读到这个标签会被折旧。谢谢

Answer 1

实际上，是slot 属性为deprecated (而不是built-in component)。

在v2.6之前，slot属性用于指定给定内容的槽名，slot-scope接收槽属性：

<base-layout>
  <template slot="header" slot-scope="{ subtitle }">
    <h1>Here might be a page title</h1>
    <h2>{{ subtitle }}</h2>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template slot="footer">
    <p>Here's some contact info</p>
  </template>
</base-layout>

从v2.6开始，这两个属性被v-slot directive组合/替换，其中插槽名称作为参数给出，任何插槽属性都在绑定值中接收：

<base-layout>
  <template v-slot:header="{ subtitle }">
    <h1>Here might be a page title</h1>
    <h2>{{ subtitle }}</h2>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>