Vue之如何封装组件，实现简单的组件复用

最新推荐文章于 2024-06-19 10:04:01 发布

我能在河边钓一整天的鱼

最新推荐文章于 2024-06-19 10:04:01 发布

阅读量1.9k

点赞数

分类专栏： [Vue] 文章标签： vue

本文链接：https://blog.csdn.net/Delicious_Life/article/details/103372496

版权

本文介绍了在Vue中如何进行组件封装，通过创建myComponents.vue文件并以图片组件为例展示封装过程。接着说明了如何在其他页面中复用该组件，并提供了具体的代码示例。同时，还详细阐述了配置路由的步骤，确保组件能在实际应用中正确显示。

摘要由CSDN通过智能技术生成

封装

首先，我们找到项目的components目录，在里面新建一个文件，我起名为myComponents.vue

然后，我们在文件中写入如下代码。我简单已一个图片为例，如果这个图片可以复用，那么其他内容当然也可以复用喽

<template>
  <img src="../../public/settings/时间.png">
</template>

<script>
export default {

}
</script>

<style>

</style>

复用

接下来，我们在view-mine中新建一个页面，作为最终显示给用户的页面

关注

专栏目录