【vue】父组件给子组件传值

简单描述：

1、蓝框–组件（SplitLine），代码中有用到，这里说一下，不细说代码；
2、红框–组件（bookList），子组件中做循环，父组件给子组件传值；

结合下图看下，更明白些；

代码

1、父组件

引入子组件，并使用

<BookList :bookList = "bookList"></BookList>

模拟数据

data () {
    return {
		bookList: [
			{
		        titleLeft: '美术',
		        books: [
		            {src: image1,type: '分类榜'},
		            {src: image2,type:'新书榜'},
		            {src: image3,type:'借阅榜'},
		        ]
		    },{
		        titleLeft: '摄影',
		        books: [
		            {src: image1,type: '分类榜'},
		            {src: image2,type:'新书榜'},
		            {src: image3,type:'借阅榜'},
		        ]
		    },{
		        titleLeft: '音乐',
		        books: [
		            {src: image1,type: '分类榜'},
		            {src: image2,type:'新书榜'},
		            {src: image3,type:'借阅榜'},
		        ]
		    },
		]
	}
}

2、子组件（bookList.vue）

子组件的循环结构

<div class="book-list">
    <div v-for="item in bookList" :key="item.titleLeft">
        <SplitLine :splineLineText="item.titleLeft"></SplitLine>
        <ul class="book-display">
            <li v-for="list in item.books" :key="list.src">
                <router-link :to="{ path: '/book/classificationList', query:{type: list.type}}">
                    <img :src='list.src'/>
                </router-link>
            </li>
        </ul>
    </div>
</div>

props接收父组件传过来的值

export default {
	props:{
		bookList: Array
	}
}

总结

1、父组件通过属性绑定，将需要传递的值通过属性绑定到使用的子组件上；

:data = "自己模拟数据名称" (data是自定义的传给子组件的数据名称，与子组件中data对应)

2、子组件通过props接收父组件绑定的属性；

props:{data:Array} (data的类型，也是看实际需求是什么)