前端MVVM框架之“Vue.js组件篇”

  • 编辑时间: 2017-01-16 21:44:00
  • 浏览量: loading...
  • 作者: 段亮

前言: 相信看过上一篇“Vue.js入门”的同学,对Vue大概有了一定程度上的了解。废话不多说,今天我们接着聊Vue的组件系统!

为什么说:“组件系统是Vue中一个核心的功能呢?

因为它能帮助我们,提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低难维护复用性等问题...

到底vue的组件系统有什么魅力呢?让我们一起来看看:

一、声明组件

1、普通组件声明方式

在引用vue.js后,首先我们会实例化一个Vue的实例。如下:

var Vue = new Vue()

然后在声明组件,如下:

Vue.component('组件名称',{配置项})

Vue components


我们声明好组件后,如何去调用呢? 伪代码如下:

<div id="parentBox">
  <my-component></my-component> //调用声明的组件
</div>


注意:所有声明的组件名称中,包含有驼峰写法的组件,得修改成“-”。比如:你的组件名称为:“MyComponent”。那么调用为my-component。


2、单文件组件声明方式

可能有些朋友会问:“什么是单文件组件呢?

通俗点说:就是以.Vue文件名结尾的组件称为“单文件组件”。如下图:


单文件组件


在一个.Vue文件中 

1、样式:style 

2、内容:template 

3、行为:script 三者分离。

可能我们传统开发组件时,还需要把css、JavaScript、html三者分开来写。而在Vue的单文件组件中却让三者在一起了,这样就变得更加像一个单独的模块。

传统开发一个组件可能是这样,如图所示:


old-components.png


二、组件通信

我们可能在思考一个问题:如果把一个页面抽象若干个组件模块后,组件与组件的数据该如何传递呢?它们又是如何接受数据的呢?...

别急,我们一起来看看在vue中,组件是如何通信的。

1、父子通信(父子关系)

父子通信


从上图可以看到


剩余80%内容付费后可查看

为保证文章的高质量产出,以下内容为vip付费阅读哦!

开通VIP会员

写文章不易,如果您觉得文章对你有帮助。
打赏激励下作者吧,谢谢支持! ~(@^_^@)~!

微信打赏 微信打赏

支付宝打赏 支付宝打赏

表情
0 条评论 最热评论 最新评论
  • 亲,暂时没有评论哦!赶紧来留下你的脚印吧!

你也想建立一个独立博客?

你是否也想打造一个在互联网上的个人品牌,成为一个家喻户晓的人物呢?
请点击了解 怎样创建个人博客

最新推荐
loading... 数据加载中...

超低服务器价格,值得购买!