文章目录
前言组件的创建与使用1. 组件的定义2. 子组件的注册与使用3. 组件通信4. Mixins 复用逻辑5. 动态组件与条件渲染6. 第三方组件库
附：关键代码片段解析1. 动态布局2. 表格与分页3. 表单提交
第三方组件库与私有组件的区别如何创建 Vue2 私有组件？1. 定义组件2. 注册组件
私有组件的核心特性1. Props 数据传递2. 自定义事件通信3. 插槽（Slots）
组件相关知识总结
前言
提示：这里可以添加本文要记录的大概内容：
注意：组件中的data是一个函数，不是一个对象；因为组件的作用就是为了复用，要是data对象，所有的组件都可以共享数据 这样数据就不安全了，使用data方法，就可以避免了，所以选择data函数方式
提示：以下是本篇文章正文内容，下面案例可供参考
组件的创建与使用
1. 组件的定义
组件通过 单文件组件（SFC） 形式定义，包含 ,
2. 子组件的注册与使用
注册子组件：通过 import 导入并在 components 属性中注册。
import RoleModal from './modules/RoleModal'
export default {
components: { RoleModal }
}
模板中使用：通过标签名直接使用，如
3. 组件通信
父 → 子：通过 ref 调用子组件方法。
this.$refs.modalForm.edit(record);
子 → 父：通过自定义事件 @ok 触发父组件逻辑。
4. Mixins 复用逻辑
混入公共逻辑：例如 JeecgListMixin 封装了表格的查询、分页等通用逻辑。
mixins: [JeecgListMixin]
5. 动态组件与条件渲染
v-if 控制显隐：根据 rightcolval 动态显示右侧卡片。
6. 第三方组件库
Ant Design Vue：使用了布局 (a-row, a-col)、表单 (a-form, a-input)、表格 (a-table) 等组件。
附：关键代码片段解析
1. 动态布局
根据 selectedRowKeys1 动态调整左右栏宽度，响应式设计（md, sm）。
2. 表格与分页
:columns="columns" :dataSource="dataSource" :pagination="ipagination" @change="handleTableChange" /> 集成分页、排序、筛选功能，通过 handleTableChange 处理表格变化事件。 3. 表单提交 使用 v-model 双向绑定查询参数，回车键触发查询。 第三方组件库与私有组件的区别 第三方组件库（如 Ant Design Vue） 是公开的、由社区或第三方团队维护的组件库，不属于私有组件。 私有组件 是开发者根据项目需求自行封装、仅在当前项目或组织内部复用的组件，用于解决特定业务逻辑或 UI 问题。 私有组件是开发者自定义的、可复用的 Vue 组件，通常具有以下特点： 独立性：封装特定功能或 UI 模块。复用性：在项目内多次调用。隔离性：样式、逻辑、数据与其他组件隔离。业务耦合性：可能包含与项目业务相关的逻辑。私有组件是 Vue2 项目的核心复用单元，通过 Props、Events、Slots 实现灵活交互。 如何创建 Vue2 私有组件？ 1. 定义组件 通过 .vue 单文件组件创建，包含 、 2. 注册组件 局部注册：在父组件中通过 components 属性注册。 全局注册：在 main.js 中全局注册，所有组件可用。 import ButtonCounter from './components/ButtonCounter.vue' Vue.component('ButtonCounter', ButtonCounter) 私有组件的核心特性 1. Props 数据传递 父组件通过属性向子组件传递数据：
2. 自定义事件通信
子组件通过 $emit 触发事件，父组件监听：
3. 插槽（Slots）
通过插槽实现内容分发：
标题
内容区域
组件相关知识总结
组件化开发：
单文件组件（SFC）组织 UI、逻辑与样式。通过 components 注册局部组件。 组件通信：
Props & Events：父子组件数据传递。Refs：直接访问子组件实例。自定义事件：$emit 触发父组件逻辑。 逻辑复用：
Mixins：混入公共代码（如分页、查询）。Slot 插槽：定制化内容分发（如表格操作列）。 动态性：
v-if/v-show：条件渲染。计算属性（Computed）：如 leftColMd 动态计算布局。 生命周期：
created()：初始化数据（示例中未显式使用，但混入可能包含）。 第三方库集成：
Ant Design Vue：快速构建企业级 UI。