Javascript 在Vue中绑定组件属性

大家好！我目前正在学习vue，并且正在关注youtube上关于从头开始构建图像旋转木马的教程。以下是图像转盘父组件的代码：

<template>
<div class = "slides">
    <div class = "slides-inner">
        <div v-for= "slide in slides">
           <Slide v-bind:slide= "slide"></Slide>
        </div>
    </div>       
</div>

从“./Slide”导入幻灯片；
导出默认值{
数据（）{
返回{
幻灯片：[
{src:'src/assets/slide1.jpg'}，
{src:'src/assets/slide2.jpg'}，
{src:'src/assets/slide3.jpg'}，
{src:'src/assets/slide4.jpg'}，
{src:'src/assets/slide5.jpg'}
]
}            
},
组成部分：{
滑动
}
}
.幻灯片{
对齐项目：居中；
背景色：#666；
颜色：#999；
显示器：flex；
字体大小：1.5rem；
证明内容：中心；
最小高度：10雷姆；
}

下面是各个图像幻灯片的代码：

<template>
    <div class="slide">  
        {{slide.src}}
    </div>
</template>

<script>
    export default {         
        data(){
            return{}            
        },
        props: {
            slide: ['slide']
        }
    }
</script>

<style scoped>

</style>

{{slide.src}
导出默认值{
数据（）{
返回{}
},
道具：{
幻灯片：[“幻灯片”]
}
}

---

父图像旋转木马组件上v-for循环上的v-bind应该将slide.src属性绑定到正在循环的当前幻灯片，以便在浏览器中显示图像，但我得到的是一个空白的浏览器屏幕和一个错误，该错误表示v-bind处操作符的正确值不是一个对象，尽管教程我在用同样的代码完全按照它应该做的工作，所以我想知道我做错了什么

在幻灯片组件中，它应该是

export default {         
    data(){
        return{}            
    },
    props: {
        slide: Object
    }
}

---

您可以在

中检查有效的道具类型。请参阅Vue样式指南，因为道具定义应尽可能详细。Vue创建者的基本要求

你能提供一个类似的例子吗（找出问题会有帮助）？

export default {         
    data(){
        return{}            
    },
    props: {
        slide: Object
    }
}