当前位置:主页 > vue.js教程 > Vue.js划分组件的方法

Vue.js如何划分组件

发布:2020-03-20 10:13:18 56


本站收集了一篇Vue相关的编程文章,网友广正奇根据主题投稿了本篇教程内容,涉及到vue.js、划分组件、Vue.js划分组件的方法相关内容,已被619网友关注,内容中涉及的知识点可以在下方直接下载获取。

Vue.js划分组件的方法

常见的一些页面,大家坐在一起敲代码就可以了,做完这个页面再做别的页面,但是作为一个功能复杂的系统,尤其是使用一些适合模块化开发的框架,这样会显得效率很低,那么我们就单纯的看在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划分组件的方法,希望对大家有所帮助!


参考资料

相关文章

  • JavaScript之Vue.js【入门基础】

    发布:2022-04-03

    本文主要介绍一下Vue.js并附上在Node.js环境下搭建一个简单的Demo实例代码。条理清晰,有助于阅读和理解。有需要的朋友可以看下


  • 关于Vue.js中 v-model 指令的修饰符

    发布:2020-02-29

    v-model 指令默认会在 input 事件中加载输入框中的数据(中文输入法中输入拼音的过程除外)。这篇文章通过实例代码给大家介绍Vue.js中 v-model 指令的修饰,感兴趣的朋友跟随小编一起看看吧


  • Vue实现todolist的教程代码

    发布:2021-05-28

    本篇文章主要介绍了使用Vue完成一个简单的todolist的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • vue.js计算属性实例分析

    发布:2021-05-30

    这篇文章主要和大家一起学习vue.js的计算属性,分享一些计算属性练习代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • Vue.js图片的随意拖动实例代码

    发布:2021-06-05

    下面小编就为大家分享一篇Vue.js实现图片的随意拖动方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧


  • webpack+vue.js入门教学

    发布:2020-07-21

    随着前端的快速发展,非常多的js框架被应用到项目中。Vue.js本身支持对组件的异步加载,配合Webpack的分块打包功能,可以极其轻松地实现组件的异步按需加载。 这篇文章是webpack+vue.j的入门教程


  • vue.js快速搭建图书管理平台

    发布:2020-02-16

    Vue.js是当下很火的一个JavaScript MVVM(Model-View-ViewModel)库.这篇文章主要介绍了基于vue.js快速搭建图书管理平台 ,需要的朋友可以参考下


  • vue.js之vue-cli脚手架的搭建详解

    vue.js之vue-cli脚手架的搭建详解

    发布:2023-01-09

    给大家整理了关于vue的教程,本篇文章主要介绍了vue.js之vue-cli脚手架的搭建详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


网友讨论