在vue的render函数中，slot意味着什么

Question

在vue中，渲染函数中有一个插槽选项，文档中写道：“如果这个组件是另一个组件的子组件，则插槽是插槽的名称”。我不明白这是什么意思。我的理解是，插槽名称是由createElement函数的名称作为插槽返回的节点，但这似乎是错误的。我的英语不好，如果我没有把问题描述清楚，我很抱歉。

​

Vue.component('render-component', {
  render(h) {
    return h('div', {
      class: 'main'
    }, [
      h('div', { slot: 'header' }, 'header'),
      h('div', { slot: 'footer' }, 'footer')
    ])
  }
})

let vm = new Vue({
  el: '#app',
  data() {
    return {
      message: 123
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <render-component>
    <template v-slot:header>111111</template>
  </render-component>
</div>

​

Answer 1

看一看Vue’s introduction to slots以了解插槽是什么。您正在查看的示例是一个速记，它使用一个render函数来呈现一个命名插槽数组。它大致相当于文档中的以下代码：

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

命名插槽允许您在一个组件中指定多个插槽(没有名称，它只是默认名称)。然后，插槽的相关<template>元素中的所有内容都将传递给插槽，例如：

    <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

希望这能有所帮助。

Answer 2

选项slot意味着呈现函数的结果将被插入到第一个参数中使用的组件的插槽中。

​

Vue.component('card-component', {
  template: `
<div>
  <h1>Hello</h1>
  <strong><slot/></strong>
  <i><slot name="note" /></i>
</div>
  `
});

Vue.component('parent-component', {
  render(h) {
    const defaultSlotContent = h('p', {}, 'default description');
    const namedSlotContent = h('p', {slot: 'note'}, 'It is a note')
    return h('card-component', {}, [defaultSlotContent, namedSlotContent]);
  }
});

let vm = new Vue({
  el: '#app',
  data() {
    return {
      message: 123
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    <parent-component />
</div>

​