v-slot属性接收对象作为值

v-slot指令可以用于在Vue中定义插槽的名称和插槽的内容。 当v-slot属性值被对象指定时，对象的属性被用来定义插槽名称并指定插槽内容的代码。

在下面的代码示例中，我们使用v-slot属性接收一个对象作为插槽的值以定义插槽的名称和内容：

<template>
  <div>
    <child-component>
      <template v-slot:default="{ name }">
        <p>Hello {{ name }}!</p>
      </template>
    </child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      message: 'Vue.js'
    }
  }
}
</script>

在上面的示例中，我们将一个对象传递到v-slot属性，对象的属性name表示插槽的名称。默认插槽内容为<p>Hello {{ name }}!</p>，其中name是从ChildComponent子组件中绑定的属性。

如果您使用带有引号的字符串值的v-slot属性，则无法指定插槽名称。 这种方法是不可能的：

<template v-slot="{'header', 'default'}">
  <header>{{ header }}</header>
  <p>{{ default }}</p>
</template>

正确的方式是使用没有引号且不包装在大括号中的名称：

<template v-slot="{ header, default }">
  <header>{{ header }}</header>
  <p>{{ default }}</p>
</template>