详解Vue3中的插槽(slot)

在这里插入图片描述

本文主要介绍Vue3中的插槽(slot)。

目录

  • 一、在普通写法中使用插槽(slot)
    • 作用域插槽
    • 默认插槽
  • 二、在setup写法中使用插槽:
  • 注意事项

在Vue3中,插槽(slot)是一种用于在父组件中向子组件传递内容的机制。它允许我们在子组件的模板中定义可插入的内容,并在父组件中传递具体的内容给子组件。

Vue3中的插槽相对于Vue2有一些重要的改进。在Vue3中,插槽有两种类型:作用域插槽(scoped slots)和默认插槽(default slots)。这两种插槽类型都可以通过元素在子组件的模板中定义。

一、在普通写法中使用插槽(slot)

作用域插槽

作用域插槽允许父组件向子组件传递数据,并在子组件中使用这些数据。在子组件中,可以使用特殊的v-slot指令来声明作用域插槽,并在插槽中访问父组件传递的数据。例如,以下是一个使用作用域插槽的示例:

<template>
  <div>
    <slot name="header" :message="message">slot>
    <slot>slot>
  div>
template>

在父组件中,可以使用v-slot指令来为作用域插槽指定具体的内容。例如,以下是一个使用作用域插槽的示例:

<template>
  <div>
    <my-component>
      <template v-slot:header="{ message }">
        <h1>{{ message }}h1>
      template>
      <p>This is the default contentp>
    my-component>
  div>
template>

在以上示例中,父组件为子组件的作用域插槽header传递了一个对象{ message },并在插槽中使用了这个传递的对象。

默认插槽

默认插槽是一种在子组件中定义的未命名的插槽。默认插槽不需要通过v-slot指令进行声明,而是可以直接在子组件的模板中使用元素。父组件中的内容会自动传递给默认插槽。例如,以下是一个使用默认插槽的示例:

<template>
  <div>
    <slot>slot>
  div>
template>

在父组件中,可以将内容放在子组件标签中,这些内容会自动传递给子组件的默认插槽。例如:

<template>
  <div>
    <my-component>
      <p>This content will be passed to the default slotp>
    my-component>
  div>
template>

在以上示例中,父组件的

标签中的内容会自动传递给子组件的默认插槽。

二、在setup写法中使用插槽:

你可能感兴趣的:(Vue,3基础入门教程,vue.js,javascript,前端)