Vue2 组件创建与使用

---

前言

提示：这里可以添加本文要记录的大概内容：

注意：组件中的data是一个函数，不是一个对象；因为组件的作用就是为了复用，要是data对象，所有的组件都可以共享数据
这样数据就不安全了，使用data方法，就可以避免了，所以选择data函数方式

---

提示：以下是本篇文章正文内容，下面案例可供参考

组件的创建与使用

1. 组件的定义

组件通过 单文件组件（SFC） 形式定义，包含 <template>, <script>, <style> 三部分：

<template> ... </template>
<script>
export default {
  name: 'RoleUserList',
  mixins: [JeecgListMixin],
  components: {
    UserRoleModal,
    SelectUserModal,
    RoleModal,
    UserModal
  },
  data() { ... },
  methods: { ... }
}
</script>
<style scoped> ... </style>

2. 子组件的注册与使用

• 注册子组件：通过 import 导入并在 components 属性中注册。

  import RoleModal from './modules/RoleModal'
  export default {
    components: { RoleModal }
  }

• 模板中使用：通过标签名直接使用，如 <role-modal>。

  <role-modal ref="modalForm" @ok="modalFormOk"></role-modal>

3. 组件通信

• 父 → 子：通过 ref 调用子组件方法。

  this.$refs.modalForm.edit(record);

• 子 → 父：通过自定义事件 @ok 触发父组件逻辑。

  <role-modal @ok="modalFormOk"></role-modal>

4. Mixins 复用逻辑

• 混入公共逻辑：例如 JeecgListMixin 封装了表格的查询、分页等通用逻辑。

  mixins: [JeecgListMixin]

5. 动态组件与条件渲染

• v-if 控制显隐：根据 rightcolval 动态显示右侧卡片。

  <a-col :md="rightColMd" :sm="24" v-if="rightcolval == 1">

6. 第三方组件库

• Ant Design Vue：使用了布局 (a-row, a-col)、表单 (a-form, a-input)、表格 (a-table) 等组件。

  <a-table :columns="columns" :dataSource="dataSource"></a-table>

---

附：关键代码片段解析

1. 动态布局

<a-col :md="leftColMd" :sm="24"> ... </a-col>
<a-col :md="rightColMd" :sm="24" v-if="rightcolval == 1"> ... </a-col>

• 根据 selectedRowKeys1 动态调整左右栏宽度，响应式设计（md, sm）。

2. 表格与分页

<a-table
  :columns="columns"
  :dataSource="dataSource"
  :pagination="ipagination"
  @change="handleTableChange"
/>

• 集成分页、排序、筛选功能，通过 handleTableChange 处理表格变化事件。

3. 表单提交

<a-form @keyup.enter.native="searchQuery">
  <a-input v-model="queryParam.roleName"></a-input>
  <a-button @click="searchQuery">查询</a-button>
</a-form>

• 使用 v-model 双向绑定查询参数，回车键触发查询。

第三方组件库与私有组件的区别

第三方组件库（如 Ant Design Vue） 是公开的、由社区或第三方团队维护的组件库，不属于私有组件。
私有组件 是开发者根据项目需求自行封装、仅在当前项目或组织内部复用的组件，用于解决特定业务逻辑或 UI 问题。

私有组件是开发者自定义的、可复用的 Vue 组件，通常具有以下特点：

1. 独立性：封装特定功能或 UI 模块。
2. 复用性：在项目内多次调用。
3. 隔离性：样式、逻辑、数据与其他组件隔离。
4. 业务耦合性：可能包含与项目业务相关的逻辑。
5. 私有组件是 Vue2 项目的核心复用单元，通过 Props、Events、Slots 实现灵活交互。

---

如何创建 Vue2 私有组件？

1. 定义组件

通过 .vue 单文件组件创建，包含 <template>、<script>、<style> 三部分。
示例：ButtonCounter.vue

<template>
  <button @click="count++">点击次数：{{ count }}</button>
</template>

<script>
export default {
  name: 'ButtonCounter',
  data() {
    return { count: 0 }
  }
}
</script>

<style scoped>
button { color: red; }
</style>

2. 注册组件

• 局部注册：在父组件中通过 components 属性注册。

  <template>
    <ButtonCounter />
  </template>

  <script>
  import ButtonCounter from './ButtonCounter.vue'

  export default {
    components: { ButtonCounter }
  }
  </script>

• 全局注册：在 main.js 中全局注册，所有组件可用。

  import ButtonCounter from './components/ButtonCounter.vue'
  Vue.component('ButtonCounter', ButtonCounter)

---

私有组件的核心特性

1. Props 数据传递

父组件通过属性向子组件传递数据：

<!-- 子组件：ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: { type: String, default: '默认文本' }
  }
}
</script>

<!-- 父组件 -->
<template>
  <ChildComponent message="来自父组件的数据" />
</template>

2. 自定义事件通信

子组件通过 $emit 触发事件，父组件监听：

<!-- 子组件 -->
<button @click="$emit('button-clicked', '事件参数')">点击</button>

<!-- 父组件 -->
<ChildComponent @button-clicked="handleClick" />

3. 插槽（Slots）

通过插槽实现内容分发：

<!-- 子组件：Layout.vue -->
<template>
  <div class="container">
    <slot name="header"></slot>
    <slot></slot> <!-- 默认插槽 -->
  </div>
</template>

<!-- 父组件 -->
<Layout>
  <template #header><h1>标题</h1></template>
  <p>内容区域</p>
</Layout>

组件相关知识总结

1. 组件化开发：
   • 单文件组件（SFC）组织 UI、逻辑与样式。
   • 通过 components 注册局部组件。
2. 组件通信：
   • Props & Events：父子组件数据传递。
   • Refs：直接访问子组件实例。
   • 自定义事件：$emit 触发父组件逻辑。
3. 逻辑复用：
   • Mixins：混入公共代码（如分页、查询）。
   • Slot 插槽：定制化内容分发（如表格操作列）。
4. 动态性：
   • v-if/v-show：条件渲染。
   • 计算属性（Computed）：如 leftColMd 动态计算布局。
5. 生命周期：
   • created()：初始化数据（示例中未显式使用，但混入可能包含）。
6. 第三方库集成：
   • Ant Design Vue：快速构建企业级 UI。

---