vue中封装组件

一、分析

该组件在什么时候会被调用，例如我之前抽出的弹窗组件

其中红色框部分是动态显示，那么首先拆分时，要知道哪部分应该是由父组件传入的数据，传入的数据有哪些，分别是什么类型，组件间通信的方式要用哪种，因为这个是子组件中进行显示的，因此我在拆分时候用的是prop进行传递；

2、其次，什么时候要显示该弹框，效果是在点击某个信息卡片时，在点击的函数中进行数据的处理，根据当前点击的index来确定具体是哪条数据显示，把梳理后的数据传入该子组件

3、如果不同的卡片数据中字段也是不一样的，那么我们需要进行的处理是给子组件进行传递一个参数 ，根据这个参数的标识，来确保是点击哪种不同类型的卡片，因此来进行传递

4、最后根据要求进行该组件的编写，其中，如果有一些样式是需要在子组件中控制，但是在父组件中数据返回之后处理的，那么需要注意样式需要新创建一个style来编写，否则会不显示，因为当前组件中style加了scope属性，没想到自己会这么蠢。。。哈哈