零基础小白如何封装一个组件

          首先，确定自己要封装什么样的一个组件，我要封装的是一个卡片，里面需要用到插槽，还需要传入一个数组，先大致有个思路，然后看自己用的是什么编辑器 我用的是VScode 

第一步  先创建父组件跟子组件 

子组件的创建

1.先创建一个vue框架

父组件的创建

1.父组件也是一样的框架

第二步  补充父子组件的内容

子组件：用来编写卡片的框架结构 

<template></template>里面的内容如下

在子组件 activeCardVue 中，我们定义了一个包含具名插槽的模板。

首先，在模板的顶部，我们使用了一个具名插槽<slot name="title"></slot>，用于显示标题。可以接收父组件传递的标题信息，并将其插入到对应位置。

接下来，在<div class="section">中，我们使用了一个v-for循环来遍历sortedTips数组，并使用<slot name="tips1"></slot>来显示每个元素。这里的name属性指定为"tips1"，表示这是一个具名插槽，用于显示一组提示信息。

然后，在<div class="content">中，我们使用了span标签，里面插入了content，用于显示内容。可以接收父组件传递的任意内容。

<script></script>里面的内容如下

父组件：根据需要，通过具名插槽向子组件传递不同的标题、提示、内容和底部内容，实现了组件的复用和定制化。

<template></template>里面的内容如下

在父组件的代码中，我们首先引入了子组件activeCardVue，并通过v-bind指令将父组件的属性tips1和content传递给子组件。

然后，我们使用了具名插槽来定制子组件的标题和底部内容。在<template v-slot:title>中，我们定义了一个具名插槽，其中包含一个<div>元素，用于显示标题。我们使用插值表达式{{ text1 }}将父组件的text1属性的值显示在标题中。

接下来，在<template v-slot:footer>中，我们定义了另一个具名插槽，其中包含一组<div>元素，用于显示图片、日期和数据。我们使用插值表达式和绑定属性的方式，将父组件的imagePath、date、imagePath1和data属性的值分别显示在对应的位置。

通过使用具名插槽，父组件可以定制子组件的标题和底部内容，将自己的数据和样式传递给子组件，实现了更灵活的组件复用和定制化。

<script></script>里面的内容如下

最后，就可以得到自己想要的组件啦，我的组件做出来是这样的~