vue3 插槽接收方法
时间: 2023-12-05 14:38:45 浏览: 28
在Vue3中,插槽被重命名为“插槽内容”,并且有了一些新的特性。在父组件中,可以使用`<slot>`元素来定义插槽内容。在子组件中,可以使用`<slot>`元素来指定插槽的位置。如果需要在插槽内容中访问子组件的数据,则可以使用作用域插槽。
以下是Vue3中使用插槽的示例代码:
```html
<!-- 父组件 -->
<template>
<div>
<h1>{{ title }}</h1>
<slot :data="data"></slot>
</div>
</template>
<script>
export default {
name: 'ParentComponent',
data() {
return {
title: 'Parent Title',
data: ['apple', 'banana', 'orange']
}
}
}
</script>
```
```html
<!-- 子组件 -->
<template>
<div>
<h2>{{ subtitle }}</h2>
<slot v-for="(item, index) in data" :item="item" :index="index" :key="index">
{{ item }}
</slot>
</div>
</template>
<script>
export default {
name: 'ChildComponent',
props: {
subtitle: {
type: String,
default: 'Child Subtitle'
}
},
data() {
return {
data: ['apple', 'banana', 'orange']
}
}
}
</script>
```
在上述示例中,父组件中的`<slot>`元素使用了`:data`属性来将父组件的数据传递给插槽内容。子组件中的`<slot>`元素使用了`v-for`指令来遍历子组件的数据,并使用`:item`和`:index`属性将数据传递给插槽内容。在插槽内容中,可以使用`v-bind`指令来接收父组件或子组件传递的数据。