Vue中封装通用组件的步骤如下：
1. 创建组件：使用Vue.component()方法创建一个Vue组件，设置组件名称、模板、数据等属性 。
2. 添加props属性：通过props属性来定义组件的参数，这样可以使组件更加通用，方便在不同场景下使用 。
3. 添加slot插槽：通过slot插槽来定义组件的内容区域，这样可以让组件更加灵活，适应不同的场景需求 。
4. 封装组件：将组件封装成一个单独的文件 ， 方便在不同的项目中使用 。可以使用Vue CLI等工具来进行封装和打包 。
下面是一个示例代码，演示如何封装一个通用的Vue组件：
```javascript
// MyComponent.vue
<template>
<div class="my-component">
<h2>{{ title }}</h2>
<slot></slot>
</div>
</template>
【vue 封装通用组件 - 经验总结 www.jingyanzongjie.com】
<script>
export default {
name: 'MyComponent',
props: {
title: {
type: String,
default: ''
}
}
}
</script>
<style scoped>
.my-component {
border: 1px solid #ccc;
padding: 10px;
}
</style>
```
在上面的代码中，我们创建了一个名为MyComponent的Vue组件 ， 添加了一个props属性来定义组件的参数 ， 添加了一个slot插槽来定义组件的内容区域，最后封装成了一个单独的文件 。这个组件可以在其他Vue项目中使用，同时也可以通过修改props属性和slot插槽来适应不同的场景需求 。
