Vue 3 传入数据<slot>

Question

我想要实现的:
在Post中显示动态链接中的图像。它遵循PostLayout.vue的布局在PostLayout

。我有一个<槽>命名为postfeatureimage，并在槽内，有一个

，我想使用图像作为它的背景。

我正在使用的:Laravel, inertijs, Vue 3

我的代码是:

Post.vue:

<template>
<PostLayout>
<template #postfeaturedImage>
<!-- Here I want to display the image -->
</template>
</PostLayout>
</template>
<script>
import PostLayout from '@/Layouts/PostLayout'
export default {
data() {
return {
featured_image: ''
}
},
components: {
PostLayout,
},
props: {
post: Object /* Passed the prop from Controller */
},
mounted () {
this.featured_image = this.post.featured_image
}
}
</script>

PostLayout.vue:

<template>
<slot name="postfeaturedImage" :bgImage="bgImage">
<div :style="`background-image:url(${bgImage}); height: 75vh;`"></div>
</slot>

</template>
<script>
export default {

}
</script>

我已经删除了所有不相关的代码。我是Vue 3和惯性的初学者，需要帮助!

Answer 1

另一种方法是创建FeaturedImage组件。此外，您可以直接从收到的道具中引用帖子图像。在这种情况下，不需要data法和mounted法。

<template>
<PostLayout>
<template #postfeaturedImage>
<FeaturedImage :src="post.featured_image" />
</template>
</PostLayout>
</template>
<script>
import PostLayout from '@/Layouts/PostLayout'
import FeaturedImage from '@/Layouts/FeaturedImage'
export default {
components: {
PostLayout,
FeaturedImage
},
props: {
post: Object
}
}
</script>

Answer 2

为PostLayout.vue添加一个道具

<script>
export default {
props: {
bgImage: { type: String },
},
};
</script>

在post。vue

中给props赋值

<template>
<PostLayout :bgImage="featured_image"> </PostLayout>
</template>

如果你想有一个没有图片和不同布局的帖子，你应该这样做:

<template>
<PostLayout>
<template #postfeaturedImage> post without background image</template>
</PostLayout>
</template>