Question

在vue中，渲染功能中有一个slot选项，文档显示“ slot是该插槽的名称，如果该组件是另一个组件的子组件”。我不明白这是什么意思。我的理解是，插槽名称是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>

插槽在Vue的渲染功能中意味着什么

2 个答案: