vue中关于slot插槽的使用方法

vue插槽slot是为子组件中的父组件提供的占位符。用<slot></slot>表示，父组件可以给这个占位符内填充任何模板代码，填充的内容会自动替换<slot></slot>标签。下面web建站小编给大家简单介绍一下vue插槽的几种方法！

vue匿名插槽

子组件内放置一个插槽：

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

父组件使用插槽：

<Header>
  <template v-slot>web建站教程 </template>
</Header>

vue作用域插槽

作用域插槽子组件内定义要传送的数据

<template>
  <div v-for="item in 10" :key="item">
    <slot :data="item" name="list"></slot>
  </div>
</template>

在调用组件的父组件内接收数据：

<SlotCom>
  <template #list="{data}">
    {{ data }}
  </template>
</SlotCom>

vue具名插槽

定义为多个插槽的组件：

<template>
   <div>
     头部： <slot name="header"></slot>
     主体： <slot></slot>
     底部： <slot name="footer">
     </slot>
   </div>
</template>

父组件填充内容需要对象插槽名：

<Com>
  <template v-slot:header>
    <div>我是header</div>
  </template>
  <template v-slot>
    <div>中间匿名插槽</div>
  </template>
  <template v-slot:footer>
    <div>我是 footer</div>
  </template>
</Com>

vue中关于动态插槽的使用方法

标签： slot插槽, vue作用域插槽, vue具名插槽, vue匿名插槽, vue插槽

上面是“vue中关于slot插槽的使用方法”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_4806.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！