以下是一些使用 v-slot 的示例：
命名插槽
<template>
<div>
<my-component>
<!-- 使用 v-slot 分发命名插槽 -->
<template v-slot:header>
<h1>Header Content</h1>
</template>
<template v-slot:footer>
<p>Footer Content</p>
</template>
</my-component>
</div>
</template>
在 my-component 中：
<template>
<div>
<slot name="header"></slot>
<slot name="footer"></slot>
</div>
</template>
默认插槽
<template>
<div>
<my-component>
<!-- 使用 v-slot 分发默认插槽 -->
<template v-slot>
<p>Default Content</p>
</template>
</my-component>
</div>
</template>
在 my-component 中：
<template>
<div>
<slot></slot>
</div>
</template>
作用域插槽
<template>
<div>
<my-component>
<!-- 使用 v-slot 分发作用域插槽 -->
<template v-slot:default="slotProps">
<p>{{ slotProps.text }}</p>
</template>
</my-component>
</div>
</template>
在 my-component 中：
<template>
<div>
<slot :text="message"></slot>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Scoped Slot Content'
};
}
};
</script>
这些示例展示了在 Vue 3.0 中使用 v-slot 的一些常见情况。v-slot 提供了更统一的语法，让插槽的使用更加清晰和灵活。需要注意，v-slot 在某些情况下还可以简写为 #，例如 #header。
转载请注明出处：http://www.zyzy.cn/article/detail/555/Vue 3.0