在
Vue 3
中，你可以
使用`<
slot>`元素来定义插槽(
slot)。你可以在父
组件中使用具名插槽(v-
slot)或作用域插槽进行渲染不同的内容。
具名插槽(v-
slot)用于在父
组件中渲染不同的内容。你可以在父
组件的模板
中使用`<template>`标签，并通过`v-
slot`指令来定义具名插槽。例如：
```javascript
const app =
Vue.createApp({
template: `
<layout>
<template v-
slot:header>
<div>header</div>
</template>
<template v-
slot:footer>
<div>footer</div>
</template>
</layout>
`
})
app.component('layout', {
template: `
<div>
<
slot name="header"></
slot>
<div>content</div>
<
slot name="footer"></
slot>
</div>
`
})
const vm = app.mount("#root")
```
作用域插槽用于在子
组件中渲染数据，并在父
组件中定义不同的标签。你可以在子
组件的模板
中使用`<
slot>`标签，并通过`v-for`指令和`:item`属性来定义作用域插槽。例如：
```javascript
const app =
Vue.createApp({
template: `
<mylist>
<span>{{
slotProps.item}}</span>
</mylist>
`
})
app.component('mylist', {
data() {
return {
list: [1, 2, 3]
}
},
template: `
<div>
<
slot v-for="item in list" :item="item"></
slot>
</div>
`
})
const vm = app.mount("#root")
```
除了具名插槽和作用域插槽之外，你还可以在
使用插槽时更灵活地控制渲染的内容。例如，在父
组件中使用双标签，并在子
组件中使用`<
slot>`元素来替换标签之间的内容。例如：
```javascript
const app =
Vue.createApp({
template: `
<myform>
<div>提交</div>
</myform>
<myform>
<button>提交</button>
</myform>
`
})
app.component('myform', {
methods: {
handleClick() {
alert('handleClick')
}
},
template: `
<div>
<input />
<span @click="handleClick">
<
slot></
slot>
</span>
</div>
`
})
const vm = app.mount("#root")
```
以上就是
Vue 3
中使用插槽的方法。你可以根据需要选择具体的插槽方式来渲染不同的内容。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [
Vue3
中的
slot](https://blog.csdn.net/q709971076/article/details/120068271)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]
689
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
