<script> export default({ // props 数据传递的意思 props:[ 'heading',//标题 'books',//图书对象数组 ], data(){ return { } }, methods : { }, }) </script>
|- 组件 - BookList.vue - css
<style scoped> /*图书列表*/ .book-list { width:100%; height:128px; display: flex; justify-content: space-around; } .heading { border-left: 4px solid #333; margin: 10px 0; padding-left: 4px; } .book-list li { width:80px; height: 100%; flex:1; margin:0 10px; } .book-list li img{ height: 100px; width: 100%; } .book-list li a{ text-align: center; font-size: 12px; text-decoration: none; display: inline-block; width: 100%; } </style>
全部的代码就在这里啦，大家可以细心发现，组件封装，其实就向我们之前JavaScript函数封装一样，传递参数，接收参数，渲染数据，重复利用，大家可以直接复制代码运行看一下，注释有解释啦。
小干货
父组件 调用 子组件 方法为 ：
在子组件上写上名字 如：
<start-set-timeout seconds=60 ref="contTimer"></start-set-timeout>
调用方法：this.$refs.contTimer.countTime(60)
但是
因为有数据的延迟 经常会出现调用子组件的事件出现undefined的事情：
TypeError: Cannot read property 'countTime' of undefined
解决方法是
// 调用时加一个定时器 setTimeout(() => { this.$refs.contTimer.countTime(60) }, 20)