组件的封装

组件的封装

组件封装通常是一些重复利用的代码，如果每个地方都重复写一些同样的代码，会显得代码冗余，而且开发效率慢，所以可以考虑进行封装。

这次封装的是一个滚动的组件。

HTML

<div class="scroll" ref="scroll" :style="{'max-height': maxHeight}">
    <div class="scrollCon">
        <slot></slot>
    </div>
</div>

封装组件的时候，要用ref来获取当前组件，不要用id，id不能复用，在一个页面不能多处使用该组件，用ref可以解决这个问题。

动态style样式的写法不要忘了加冒号

JS

props: {
            dataList: Array,
            maxHeight: {
                type: String,
                default: '850px'
            },
        },

封装组件通过props来接收数据

组件封装大概流程如上，将共用的代码封装起来