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

原创

于 2019-12-03 18:58:31 发布 · 2k 阅读

CC 4.0 BY-SA版权

文章标签：

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

封装

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

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

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

<script>
export default {

}
</script>

<style>

</style>

复用

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