Vue.js划分组件的方法

这篇文章主要为大家详细介绍了Vue.js划分组件的方法，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

常见的一些页面，大家坐在一起敲代码就可以了，做完这个页面再做别的页面，但是作为一个功能复杂的系统，尤其是使用一些适合模块化开发的框架，这样会显得效率很低，那么我们就单纯的看在Vue里面如何划分组件的。

总结下来有两种可以划分，两种划分的方法一种是页面上的功能块，select，pagenation,和一些需要大量代码去实现的一些部分，我们可以把它提取出来放到一起或者分类。还有一种根据页面区域来划分,header,footer,sidebar，有了组件之后Vue的组件是怎么实现的？

【q1010.com温馨提示：图片暂缺】

Vue的组件是怎么实现的？先来看一下在文件系统里面是什么样的

【q1010.com温馨提示：图片暂缺】

APP.vue是项目的一个入口，而我们分好的组件也是一个对象，在APP.vue里面，我们把各个组件用import 导入，header指的是右边的header.vue文件，这个写法是es6的一个写法，当然如果不用不用es6组件化，也得用其他的一些requires来写，进行一个打包处理，如果只是把这两个组件引入到app.vue 里面，在页面中还是现实 不了这两个组件的。

在Vue里面 必须通过components来注册这个组件，把引入进来的  放入，然后在模板层面上再来写<header></header>和<footer></footer>，在渲染之后，模板层面会变成header.vue和footer.vue里面的内容，有一点需要注意，Vue必须要去注册才可以使用

【q1010.com温馨提示：图片暂缺】

介绍一下Vue组件之间的通信，秉承了一个概念，必须先要注册，header.vue文件里面的代码，假设我们里面有个data是username，然后方法是dothis，我们看到有一个属性props,注册了一个msg,当我们的app.vue调用了header这个组件的时候，我们可以直接在header属性里面写msg，并且把app.vue里面任何的数据东西传到header.vue里面，所有的都由Vue的机制去实现，如果header.vue这里没有写msg的话，是获取不到属性的。

 

总结

 

以上所述是小编给大家介绍的Vue.js划分组件的方法，希望对大家有所帮助！

本文来自：http://www.q1010.com/184/4367-0.html

注：关于Vue.js划分组件的方法的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js