当前位置：主页 > vue.js教程 >

Vue.js如何划分组件

  • 更新时间：2020-03-20 10:13:18
  • 编辑：糜信鸿

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

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

Vue.js划分组件的方法

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

Vue.js划分组件的方法

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

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

Vue.js划分组件的方法

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

总结

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

相关教程

  • 在 Vue.js中优雅地使用全局事件的方法

    这篇文章主要介绍了在 Vue.js中优雅地使用全局事件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    发布时间：2019-06-27

  • Vuex之理解Mutations的用法实例

    本篇文章主要介绍了Vuex之理解Mutations的用法实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    发布时间：2019-07-25

  • Spring Boot+Spring Cloud+Vue+Element项目实战：手把手教你开发权限管理系统

    Spring Boot+Spring Cloud+Vue+Element项目实战：手把手教你开发权限管理系统

    本书从项目实践出发，手把手、心贴心地带领读者从零开始，一步一步地开发出功能相对完整的权限管理系统，从而深入掌握当前主流的Spring Boot + Spring Cloud + Vue前后端集成开发技术。 全书分为三篇共32章。第一篇为系统介绍篇，对系统的功能、架构和界面进行介绍，对系统的安装运行给出指南，对涉及的关键技术进行简单介绍。第二篇为后端实现篇，从数据库设计和搭建开发环境开始，全面细致地讲解权限管理系统的后端实现全过程。第三篇为前端实现

    大小：132979 MB 项目实战

  • Vue.js快速入门

    Vue.js快速入门

    目前单页应用框架层出不穷，其中Vue.js是十分耀眼的项目之一，受到国内外开发人员的极度推崇。 全书分为8章，内容包括Vue.js概述、Vue.js的安装、定义页面、渲染视图、路由、发送HTTP请求、表单的绑定和提交、打包、部署、解决js的跨域问题、Debug、Component、Mixin、Vuex、页面的生命周期等，最后还给出一个实战案例供读者了解Vue.js项目开发过程。 本书适合Vue.js初学者、Web前端开发人员，也适合高等院校和培训学校的师生教学参考。

    大小：26581 MB MVue.js入门

  • Vue.js快速入门

    Vue.js快速入门

    目前单页应用框架层出不穷，其中Vue.js是十分耀眼的项目之一，受到国内外开发人员的极度推崇。

    大小：186.6 MBWeb前端电子书

  • Vue.js前端开发：快速入门与专业应用

    Vue.js前端开发：快速入门与专业应用

    本书分为10章，包括简介、基础特性、指令、过滤器、过渡、组件、状态管理、常用插件、工程实例和Weex打包。本书从简单的单个实例和基础语法，到工程实例，将系统地讲述Vue.js在项目中的

    大小：3.6KB MB前端开发电子书

  • Vue.js项目实战

    Vue.js项目实战

    Vue实用、灵便、更快，为搭建详细的当代Web运用出示了需要的全部作用，其渐进式的特性也让开发人员可以轻轻松松入门，发布后快速获得了前端工程师工作人员的亲睐。这书由Vue.js关键精英

    大小：141 MBVue

  • JavaScript+Vue+React全程实例

    JavaScript+Vue+React全程实例

    这书根据基础知识与开发实践活动紧密结合的观念，选萃当今简易、好用和时兴的百余个JavaScript编码案例，协助阅读者学习培训把握JavaScript开发语言。本书內容详实、重中之重突显、浅显易懂，包含了JavaScript前端开发开发的各个方面。

    大小：59150 MB MJS实例

  • Vue企业开发实战

    Vue企业开发实战

    本书以Vue.js 2为基础，以项目实战的方式引导读者渐进式学习Vue.js框架。本书分为项目起步、Vue.js介绍、项目插件、项目梳理等部分。

    大小：109.6 MBVue.js实战电子书

用户留言

发布评论

最新更新

热门推荐