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

目录

封装

复用

配置路由

效果如下


 

封装

 

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

Vue之如何封装组件,实现简单的组件复用_第1张图片

 

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





 

 

复用

 

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

Vue之如何封装组件,实现简单的组件复用_第2张图片

 

写入如下代码,达到引用组件页面,注册这个组件,通过标签使用这个组件的效果





 

 

配置路由

 

为了能让效果显示在页面中,我们还需要配置路由。 进入router.js页面

Vue之如何封装组件,实现简单的组件复用_第3张图片

 

写入如下代码

Vue之如何封装组件,实现简单的组件复用_第4张图片

 

 

效果如下

 

Vue之如何封装组件,实现简单的组件复用_第5张图片

你可能感兴趣的:([Vue])