vue.js 插槽_Vue.js插槽

vue.js 插槽

A component can be 100% responsible for generating its output, like in this case:

组件可以100％负责生成其输出，例如在这种情况下：

Vue.component('user-name', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})

or it can also let the parent component inject any kind of content into it, using slots.

或者也可以让父组件使用slot向其中注入任何类型的内容。

What is a slot? It’s a space in your component output that is reserved, waiting to be filled.

什么是插槽？ 这是组件输出中的保留空间，等待填充。

You define a slot by putting <slot></slot> in a component template:

通过将<slot></slot>放在组件模板中来定义插槽：

Vue.component('user-information', {
  template: '<div class="user-information"><slot></slot></div>'
})

When using this component, any content added between the opening and closing tag will be added inside the slot placeholder:

使用此组件时，在开始和结束标记之间添加的所有内容都将添加到广告位占位符内：

<user-information>
  <h2>Hi!</h2>
  <user-name name="Flavio"></user-name>
</user-information>

If you put any content side the <slot></slot> tags, that serves as the default content in case nothing is passed in.

如果将任何内容放在<slot></slot>标记旁边，则它将作为默认内容，以防万一没有传入任何内容。

A complicated component layout might require a better way to organize content, with multiple slots as well.

复杂的组件布局可能需要更好的方式来组织内容，同时还要有多个插槽。

This is why Vue offers us named slots.

这就是Vue为我们提供命名插槽的原因 。

命名插槽 (Named slots)

With a named slot you can assign parts of a slot to a specific position in your component template layout, and you use a slot attribute to any tag, to assign content to that slot.

使用命名插槽，您可以将插槽的各个部分分配到组件模板布局中的特定位置，并且可以对任何标签使用slot属性，以将内容分配给该插槽。

Anything outside any template tag is added to the main slot.

模板标签之外的所有内容都会添加到主slot 。

For convenience I use a page single file component in this example:

为了方便起见，在此示例中使用page单个文件组件：

<template>
  <div>
    <main>
      <slot></slot>
    </main>
    <aside>
      <slot name="sidebar"></slot>
    </aside>
  </div>
</template>

Here is how we can use it, providing the slots content, in a parent component:

这是我们在父组件中提供槽位内容的方法：

<page>
  <template v-slot:sidebar>
    <ul>
      <li>Home</li>
      <li>Contact</li>
    </ul>
  </template>

  <h2>Page title</h2>
  <p>Page content</p>
</page>

There is a handy shorthand, #:

有一个方便的缩写， # ：

<page>
  <template #sidebar>
    <ul>
      <li>Home</li>
      <li>Contact</li>
    </ul>
  </template>

  <h2>Page title</h2>
  <p>Page content</p>
</page>

Note: Vue 2.6 deprecated the slot attribute in favor of v-slot, and requires it to be added to a template tag (while slot could be applied to any tag)

注意：Vue 2.6不推荐使用slot属性，而推荐使用v-slot ，并且要求将其添加到template标签中(而slot可以应用于任何标签)

范围插槽 (Scoped slots)

In a slot, we can’t access the data contained in the child component from the parent.

在插槽中，我们无法从父级访问子级组件中包含的数据。

Vue recognizes this use case and provides us a way to do so:

Vue可以识别这种用例，并为我们提供了一种方法：

<template>
  <div>
    <main>
      <slot v-bind:dogName="dogName"></slot>
    </main>
  </div>
</template>

<script>
export default {
  name: 'Page',
  data: function() {
    return {
      dogName: 'Roger'
    }
  }
}
</script>

In the parent we can access the dog name we passed using:

在父级中，我们可以使用以下方式访问传递的狗名：

<page>
  <template v-slot="slotProps">
    {{ slotProps.dogName }}
  </template>
</page>

slotProps is just a variable we used to access the props we passed. You can also avoid setting a variable just to hold the props you pass to the child component, by destructuring the object on the fly:

slotProps只是我们用来访问传递的道具的变量。 您还可以通过动态销毁对象来避免仅设置变量来保留传递给子组件的道具：

<page>
  <template v-slot="{ dogName }">
    {{ dogName }}
  </template>
</page>

翻译自: https://flaviocopes.com/vue-slots/

vue.js 插槽