javascript - 在 Vue 中绑定组件属性

Question

今天是个好日子！我目前正在学习 vue，并且正在关注关于从头开始构建图像轮播的 youtube 教程。这是 Image Carousel 父组件的代码：

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

<script>
    import Slide from './Slide';

    export default{        
        data(){
            return{
                slides:[
                    { 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' }
                ]
            }            
        },

        components: {
            Slide
        }
    }
</script>

<style scoped>
  .slides {
    align-items: center;
    background-color: #666;
    color: #999;
    display: flex;
    font-size: 1.5rem;
    justify-content: center;
    min-height: 10rem;
  }
</style>

这是单个图像幻灯片的代码：

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

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

<style scoped>

</style>

父 Image Carousel 组件上的 v-for 循环上的 v-bind 应该将 slide.src 属性绑定到正在循环的当前幻灯片，以便它将在浏览器中显示图像，但我得到的是空白浏览器屏幕和一个错误，表明 v-bind 的运算符的正确值不是一个对象，尽管我正在遵循的教程完全可以使用相同的代码，所以我想知道我做错了什么。

标签： javascriptvue.js

Answer 1

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

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

您可以在Vue 文档中检查有效的道具类型