首页手记 Vue3公共组件学习入门教程

Vue3公共组件学习入门教程

标签：

前端工具 Vue.js

概述

本文介绍了Vue3公共组件学习入门的相关内容，包括公共组件的基本概念、重要性以及设计特点。文中详细讲解了如何创建和复用公共组件，并提供了多个实用的公共组件示例代码。通过这些示例，读者可以更好地理解并应用Vue3公共组件学习入门的知识。

Vue3公共组件学习入门教程

1. Vue3公共组件简介

1.1 什么是公共组件

公共组件是指在多个Vue项目或同一项目中多个页面中可以重复使用的Vue组件。这些组件通常处理一些通用的任务，例如按钮、导航、模态框等。公共组件的设计目的是为了减少代码冗余、提高代码重用性和维护性。

1.2 为什么需要公共组件

使用公共组件有几个关键原因：

提高开发效率：通过复用公共组件，开发者可以减少重复编写相同代码的工作量，从而加快开发速度。
增强代码可维护性：维护公共组件只需要在一处修改，所有使用该组件的地方都会自动更新，简化了维护工作。
保持一致性：公共组件确保了跨应用的一致性，使得用户在不同页面或不同应用中获得一致的用户体验。
易于扩展：组件化的开发模式使得在需要时添加新功能更容易，只需要在组件内进行修改即可。

1.3 公共组件的特点和优势

公共组件具有以下特点和优势：

模块化设计：公共组件通常围绕单一功能设计，模块化清晰，易于理解和维护。
高度抽象：公共组件可以高度抽象出通用的功能，适用于多种不同的上下文。
易于测试：公共组件独立于其他代码，可以独立测试，从而提高整个应用的测试覆盖率。
易于迁移：如果需要迁移代码到其他项目或应用中，公共组件可以方便地携带，无需大量的移植工作。

2. 常用公共组件介绍

2.1 按钮组件

按钮组件是最常见的公共组件之一，它通常用于触发动作如提交表单、导航到另一个页面等。

代码示例

<template>
  <button @click="handleClick">{{ text }}</button>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: 'Click Me'
    }
  },
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

2.2 路由导航组件

路由导航组件用于显示当前页面的导航信息，通常包括不同页面的链接。

代码示例

<template>
  <nav>
    <ul>
      <li v-for="route in routes" :key="route.name">
        <router-link :to="route.path">{{ route.name }}</router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  props: {
    routes: {
      type: Array,
      default: () => []
    }
  }
}
</script>

2.3 模态框组件

模态框组件用于展示一些弹出窗口，例如确认对话框、信息提示等。

代码示例

<template>
  <div v-if="visible" class="modal">
    <div class="modal-content">
      <slot></slot>
      <button @click="hideModal">关闭</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    hideModal() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style scoped>
.modal {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
</style>

2.4 分页组件

分页组件用于显示一个列表或表单的多个页面，通常包括导航到上一页、下一页、跳转到特定页等功能。

代码示例

<template>
  <div class="pagination">
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <span>{{ currentPage }}</span>
    <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
  </div>
</template>

<script>
export default {
  props: {
    currentPage: {
      type: Number,
      default: 1
    },
    totalPages: {
      type: Number,
      default: 1
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.$emit('update:currentPage', this.currentPage - 1)
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.$emit('update:currentPage', this.currentPage + 1)
      }
    }
  }
}
</script>

<style scoped>
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  margin: 0 5px;
}
</style>

3. 如何创建公共组件

3.1 准备工作

在开始创建公共组件之前，需要确保项目结构能够支持组件的复用。通常情况下，公共组件会放在一个单独的文件夹中，如components，并且在不同项目中通过npm或其他方式引入和使用。

3.2 创建组件文件

创建公共组件时，需要遵循Vue的组件规范。每个组件应该包含一个.vue文件，该文件通常包含三个部分：<template>、<script>和<style>。

代码示例

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  // 组件逻辑
}
</script>

<style scoped>
/* 组件样式 */
</style>

3.3 组件的基本结构

公共组件应该具有良好的通用性和可扩展性。通常包括如下部分：

模板部分：定义组件的HTML结构。
脚本部分：包含组件的数据、方法、计算属性等逻辑。
样式部分：定义组件的CSS样式，建议使用Scoped样式以避免全局样式冲突。
属性和事件：通过props、事件等方式与外界通信。

代码示例

<template>
  <div class="card">
    <h2>{{ title }}</h2>
    <p>{{ content }}</p>
    <button @click="handleClick">点击</button>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: 'Default Title'
    },
    content: {
      type: String,
      default: 'Default Content'
    }
  },
  methods: {
    handleClick() {
      console.log('Button clicked')
      this.$emit('click')
    }
  }
}
</script>

<style scoped>
.card {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

3.4 导入和导出组件

使用export default导出组件，并在需要的地方通过import导入。

代码示例

// 在组件文件中
export default {
  // 组件定义
}

// 在其他文件中使用
import MyComponent from './path/to/MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}

4. 如何复用公共组件

4.1 在不同项目中复用公共组件

将公共组件发布到npm或其他代码托管平台，然后在其他项目中通过npm install或直接import引入。

代码示例

# 发布到npm
npm login
npm publish

# 在其他项目中使用
npm install my-common-components
import MyComponent from 'my-common-components'

4.2 在同一项目中不同页面复用公共组件

在Vue项目中，可以通过全局注册或局部注册的方式复用公共组件。

代码示例

// 全局注册
import MyComponent from './path/to/MyComponent.vue'
Vue.component('my-component', MyComponent)

// 局部注册
import MyComponent from './path/to/MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}

4.3 管理公共组件的版本

管理公共组件的版本可以通过npm的版本控制来进行。发布新版本时，更新npm包的版本号，确保使用者能够获取到最新的组件版本。

代码示例

# 更新版本号
npm version patch

# 发布新版本
npm publish

5. 高级主题：组件通信与状态管理

5.1 父子组件通信

父子组件通信主要通过props和$emit实现。父组件通过props向子组件传递数据，子组件通过$emit触发事件，将数据传递回父组件。

代码示例

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent :message="parentMessage" @childEvent="handleChildEvent" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent'
    }
  },
  methods: {
    handleChildEvent(data) {
      console.log('Child event triggered:', data)
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="triggerEvent">Trigger Event</button>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: ''
    }
  },
  methods: {
    triggerEvent() {
      this.$emit('childEvent', 'Hello from Child')
    }
  }
}
</script>

5.2 兄弟组件通信

兄弟组件不能直接通过props和$emit通信，通常通过中间件实现，例如使用Vuex或事件总线。

代码示例

// 事件总线
import Vue from 'vue'
export const eventBus = new Vue()

// 兄弟组件1
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
import { eventBus } from './eventBus'

export default {
  data() {
    return {
      message: 'Hello from Brother 1'
    }
  },
  methods: {
    sendMessage() {
      eventBus.$emit('message', this.message)
    }
  }
}
</script>

// 兄弟组件2
<template>
  <div>
    <p>{{ receivedMessage }}</p>
  </div>
</template>

<script>
import { eventBus } from './eventBus'

export default {
  data() {
    return {
      receivedMessage: ''
    }
  },
  created() {
    eventBus.$on('message', message => {
      this.receivedMessage = message
    })
  }
}
</script>

5.3 使用 Vuex 管理公共组件的状态

Vuex 是一个用于Vue应用的状态管理模式。通过Vuex，可以方便地管理组件之间的状态共享，特别是对于复杂的应用结构。

代码示例

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    sharedState: 'Hello Vuex'
  },
  mutations: {
    updateSharedState(state, newState) {
      state.sharedState = newState
    }
  },
  actions: {
    updateSharedState({ commit }, newState) {
      commit('updateSharedState', newState)
    }
  }
})

// 使用Vuex
import { createStore } from 'vuex'

const store = createStore({
  state: {
    sharedState: 'Hello Vuex'
  },
  mutations: {
    updateSharedState(state, newState) {
      state.sharedState = newState
    }
  },
  actions: {
    updateSharedState({ commit }, newState) {
      commit('updateSharedState', newState)
    }
  }
})

// 在组件中使用Vuex
import { mapActions } from 'vuex'

export default {
  computed: {
    sharedState() {
      return this.$store.state.sharedState
    }
  },
  methods: {
    ...mapActions(['updateSharedState'])
  }
}

6. 实际案例：实现一个可复用的模态框组件

6.1 需求分析

假设我们需要一个模态框组件，用于展示一些信息或进行某些操作。该组件应该具有以下功能：

显示或隐藏模态框
显示一个标题
显示一个关闭按钮

6.2 设计组件结构

模态框组件将包含一个模态框容器和一个关闭按钮。模态框容器可以通过v-if控制是否显示，关闭按钮用于隐藏模态框。

6.3 编写组件代码

下面是一个简单的模态框组件的实现。

代码示例

<template>
  <div v-if="visible" class="modal">
    <div class="modal-content">
      <slot></slot>
      <button @click="hideModal">关闭</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    hideModal() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style scoped>
.modal {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
</style>

6.4 测试和优化组件

在实际项目中使用该组件，确保其功能正常并且样式符合预期。可以通过添加更多的功能和样式来进一步完善组件。

代码示例

<template>
  <div>
    <button @click="showModal">显示模态框</button>
    <Modal :visible="visible" @update:visible="updateVisible">
      <h2>模态框标题</h2>
      <p>这里是模态框的内容。</p>
    </Modal>
  </div>
</template>

<script>
import Modal from './components/Modal.vue'

export default {
  components: {
    Modal
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    showModal() {
      this.visible = true
    },
    updateVisible(value) {
      this.visible = value
    }
  }
}
</script>

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

三国纷争

JAVA开发工程师

手记
篇

粉丝

51

获赞与收藏

178

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30583 343

网络编程入门教程

20个小节 12561 237

Pandas 入门教程

25个小节 18499 337

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Vue3公共组件学习入门教程

1.1 什么是公共组件

1.2 为什么需要公共组件

1.3 公共组件的特点和优势

2.1 按钮组件

代码示例

2.2 路由导航组件

代码示例

2.3 模态框组件

代码示例

2.4 分页组件

代码示例

3.1 准备工作

3.2 创建组件文件

代码示例

3.3 组件的基本结构

代码示例

3.4 导入和导出组件

代码示例

4.1 在不同项目中复用公共组件

代码示例

4.2 在同一项目中不同页面复用公共组件

代码示例

4.3 管理公共组件的版本

代码示例

5.1 父子组件通信

代码示例

5.2 兄弟组件通信

代码示例

5.3 使用 Vuex 管理公共组件的状态

代码示例

6.1 需求分析

6.2 设计组件结构

6.3 编写组件代码

代码示例

6.4 测试和优化组件

代码示例

阅读免费教程