vue组件通信(大神勿喷)

原创 zxsclq 随笔 前端基础 345阅读 2018-03-26 17:03:33 举报

之前有写过一个vuejs的基本玩法,比较适合初学者。其实我也是初学者,不过学的久一点,慢慢来分享一点进阶的东西。

vue组件通信

之前有看过一篇文章,说veujs是一个插件化,组件化的框架。
官方的定义里边:组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树:
Component Tree
在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例。
然后~自己去看看vuejs官网
实际过程中,我们会发现,官方给的案例,我们自己用起来跳跃有点大。一下是我自的一点的总结,大神勿喷。

组件

首先,组件的概念,我个人的理解某些程度上是跟js的封装是差不多的。一般情况下,多处复用的js,我们回封装在一个公共的文件里边,可以参考我之前发的axios封装。然后组件,类似于多处复用的一个模块,写在独立的文件里边,然后调用即可。一下是我最近的一个项目,ui部分用的是iview:

我自己的项目里边,多处用到了这个时间区间。右边的一个按钮组,作别的时间区间。然后通过切换右边的按钮,更新下边的相关数据。直接上代码。

父组件

很多东西都写在备注里边,请认真看备注,如果有错别字,请告知谢谢!!!

子组件

通关上边的父组件,我们知道子组件的文件名和文件夹名称,这个千万别错了,错了也运行不过去。home-data-choose.vue

OK大家可以在自己的项目里边进行测试,有什么问题可以留言,看到了会第一时间回复。(共勉)

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复