• 从不羡慕别人的优秀,因为相信自己也可以优秀。
  • 闲下来时看看书,书本里的故事,总有你学到的人生。
  • ---By:段亮
头部背景图

前端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、父子通信(父子关系)

父子通信


从上图可以看到:子组件需要数据,可以在props中接受定义。而子组件修改好数据后,想把数据传递给父组件。可以采用emit方法

比如:

在父组件中是这样:(伪代码)

<div id="testBox">
   <more-list v-on:setVal="getVal"></more-list>
</div>
....
methods: {
  getVal(val){
    console.log('接受来自子组件传递的数据:', val)
  }
}

在子组件中可能是这样:(伪代码)

...
watch: {
  val (newVal, oldVal) { 
     //第一个参数为传递出来的方法名,第二个数据。
     this.$emit('setVal', newVal) 
  }
}


2、跨组件通信(不是父子关系)

var bus = new Vue()
    
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
 
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
    console.log('接受来自父组件的值:',id)
})

可能在项目的复杂情况下,或许Vuex(全局状态管理)是一个不错的选择。关于vuex会在后续文章中详细讲解。感兴趣的朋友可以关注下,在这里就不做过多解释。


三、与传统开发对比

聊了这么多关于Vue的组件式开发,和传统开发相比有着什么样的优势呢?

比如:我们要开发一个项目,拿到效果图可能是这样。如下图:

效果图


在传统项目开发中,或许你会把单个模块写成这样。如下图:


传统项目开发


而在vue中,可能是这样。如下图:

Vue项目开发


可能很多同学可能会问:.Vue文件好像不能直接被浏览器解析的,那么怎么办呢?一般项目又是怎么开发呢?

一般我们会采用Webpack作为前端构建工具,使用vue-loader来解析.Vue。把.Vue文件的内容编译成js,最终通过webpack打包上线。这种项目开发方式被称之为“单页面应用(SPA)

关于具体的Vue单应用实战开发,我会在后续的文章讲解。大家可以关注下我的下一篇文章:“前端MVVM框架Vue.js之实战篇

写在最后:Vue的组件系统不但帮我们解决了:效率低、难维护、复用性等问题...还可以让开发者像搭积木一样,用组件拼出一个完整的应用界面。

2017了,你还不会玩Vue?赶紧上车,来不及解释!!!

本文出自段亮个人博客,如需转载请注明出处。

本文出处:http://www.duanliang920.com/learn/web355.html


如果您觉得文章对你有帮助,那么可以扫下二维码进行打赏。
打赏多少您高兴就行,谢谢支持! ~(@^_^@)~

微信扫一扫 微信打赏

支付宝扫一扫 支付宝打赏

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

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

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

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