vue2具名插槽父子组件传值

在 Vue2 中，具名插槽是一种用于在父组件中向子组件传递内容的方式。具名插槽允许我们在一个组件的模板中预留出一个或多个插槽，然后在使用该组件时，通过具名插槽向其中插入内容。

具名插槽的传值方式相对简单，我们可以通过在父组件中使用 `<template>` 标签，并为其设置一个 `slot` 属性来实现。在子组件中，我们可以使用 `<slot>` 标签并指定其 `name` 属性来获取父组件传递过来的具名插槽内容。

下面是一个简单的示例，演示了如何在父子组件之间使用具名插槽进行传值：

父组件模板：

<template>
  <div>
    <h1>父组件</h1>
    <slot name="content"></slot>
  </div>
</template>

子组件模板：

<template>
  <div>
    <h1>子组件</h1>
    <slot name="content"></slot>
  </div>
</template>

在父组件中，我们通过 `<slot>` 标签并指定其 `name` 属性为 `"content"` 来预留出一个具名插槽。在使用该组件时，我们可以通过在 `<template>` 标签中设置一个 `v-slot` 属性，并将其值设置为 `"content"` 来向其中插入内容：

<template>
  <div>
    <parent-component>
      <template v-slot:content>
        <p>这是父子组件传递的内容。</p>
      </template>
    </parent-component>
  </div>
</template>

这样，在子组件中，我们就可以通过 `<slot>` 标签并指定其 `name` 属性为 `"content"` 来获取父组件传递过来的具名插槽内容了。