vue.js中如何引入组件

这篇文章主要介绍了vue.js中如何引入组件，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

我们提供的服务有：成都做网站、成都网站设计、微信公众号开发、网站优化、网站认证、老城ssl等。为上千余家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的老城网站制作公司

vue.js中引入组件的方法：1、创建自定义组件的文件夹；2、在要添加的页中加入要引入的模块；3、在index.vue中引入模块；4、在index.vue页面引入组件即可。

具体步骤如下：

1、首先在你的项目中专门创建一个放置自定义组件的文件夹（我是放在了components底下的common中，本文以table.vue为例）

2、然后在你要添加的页中加入要引入的模块,注意驼峰命名的方式（本文为例：，因为我在定义table模块的时候是定义name：v-table，所以引用的时候，也必须得用所在table模块中name定义的名字）；

3、接着在index.vue中引入table.vue模块

//index.vue 页面 ，引入v-table模块

     //这就是你引入的自定义模块；注意是驼峰命名法

4、在index.vue页面引入该组件(注意：table.vue，我是在index.vue页面中添加了模块,不是html标签，其实就是vue引入新的子组件）

//index.vue

提示：说白了，自定义组件就好比封装，把一些公共的模块抽取出来，然后写成单独的的工具组件或者页面，在需要的页面中就直接引入即可。

另外，为了防止在同一页面写入过多的代码，不方便后期维护，便可以把整个页面分成多个小模块，然后在主页面进行模块引入，创建包括引入步骤都是一样的。

比如：

感谢你能够认真阅读完这篇文章，希望小编分享vue.js中如何引入组件内容对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，遇到问题就找创新互联，详细的解决方法等着你来学习!