Question

大家好！我目前正在学习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>

<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上运算符的正确值不是一个对象，尽管我正在遵循的教程使用相同的代码完全可以正常工作，所以我想知道自己在做什么错误。

Answer 1

在幻灯片组件中，应该是

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

您可以在Vue document中查看有效的道具类型

Answer 2

另请参阅《 Vue风格指南》，因为道具定义应尽可能详细。 Vue的创建者的基本要求。 See Vue Style Guide。

在Vue中绑定Component属性

2 个答案: