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

动态插槽表示有多个插槽，不同的插槽以不同的状态显示。这时候我们可以用动态插槽。插槽名称是一个变量名，其值可以动态修改。下面web建站小编给大家简单介绍一下vue插槽的几种方法！

父组件代码：

<button v-for="item in slotList" :key="item.name" @click="changeSlot(item)">
  {{ item.content }}
</button>
<childCom>
  <template #[name]>
     <div>我是{{ name }}插槽</div>
  </template>
</childCom>
<script>
import { reactive, ref } from 'vue'
let name: string = ref('header')
 
type Slots = {
  name: string
  content: string
}
const slotList = reactive<Slots[]>([
  { name: 'header', content: '头' },
  { name: 'body', content: '中间' },
  { name: 'footer', content: '尾' },
])
const changeSlot = (item: Slots): void => {
  name.value = item.name
}
</script>

子组件代码：

<template>
  <div>
  <slot name="header"></slot>
  <slot name="body"></slot>
  <slot name="footer"></slot>
  </div>
</template>

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

标签： vue插槽, 动态插槽

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

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

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