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

我能在河边钓一整天的鱼

于 2019-12-03 18:58:31 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/Delicious_Life/article/details/103372496

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

封装

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

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

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

<script>
export default {

}
</script>

<style>

</style>

复用

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

200万优质内容无限畅学