简介:

组件(Component)是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素,封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:

组件的注册(官网)

有两种方式注册Vue组件:全局注册和局部注册,就好像欧元和英镑的区别,

前者可以在各Vue实例中使用,后者只能在注册他的Vue实例或者父组件中使用。

如果在组件中使用组件,就形成了组件的嵌套,如果组件里嵌套的组件是自己,就形成组件的递归。

组件由两部分组成

一部分是需要自定义的tag-name,以下面为例,tagname是<my-component>,

另一部分是options对象,里面包含了该组件的模板,方法,props,data等细节

全局注册:

Vue.component('my-component', {
// 选项
})

局部注册:

var options={template:....}//组件的选项对象
new Vue({
el:'#man',
components:{
'my-component',options
}
});

props,events,slots

下面说说我觉得组件中的三个重点:propeventsslots。当我看到组件这部分时,之前没有接触过mvvm类型的框架,

所以到这里感觉是极限了,这时,找到熟悉的事物作类比是一个好办法。如果把组件比成一间房子,上面的三只就是房子用来和外界通信的门窗。

在开始之前:应该记住一张图和一句话:

这张图对应的意思是:父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。

1.自定义事件

想象一个场景。2048游戏里面,两个子组件中的数据合并了,产生一个addscore事件,需要通知父组件容器,这时,就可以用自定义事件了:

//父组件中

<father v-on:addscore="addscore"></father>
function addscore(){
this.score++;
} //子组件中 this.$emit('addscore');

注意 ,在子组件中,子组件只负责触发这个自定义事件,通过$emit方法来触发,而在父组件中则定义事件触发之后的回调函数。好吧,其实vue官方教程的两个button触发add事件看起来是个更好的例子。。。。

2.props

再想象一个场景,2048中,父组件中的data中有一个定义了所有card的值的数组,现在要把这些值传到每一个card中,这时就用到props:

//爹组件

//在模板中,为子组件写一个自定义属性card,用来把cardNum传给子组件
<children :card="card_num"></children> data:{card_num:8} //****子组件中****** <div>{{card}}</div> 在组件的props字段中加入子组件的自定义属性
{
data:....
computed:....
props:{card:null}
}

其实理解起来很简单,vue的子组件对父组件来说被包装成为一个类似于<children></children>的标签,正如你在父组件中看到的那样。但是vue为我们留了一个props属性,就像上帝给人类五官用来感受世界一样,组件用props和自定义事件用来和父组件传递消息。

这也是一种封装,对父组件隐藏了内部的实现,只留下了props作为接口。接口在现实世界也很常见,比如显示器对主机的接口,你不必管显示器的内部实现,只要知道接上主机就能显示信息了就行。

3.slots

如果你了解过es6的模板字符串,那么理解起这个来将毫不费劲。我当时可是被这个slots搞得稀里糊涂的。。。当然当时不知道模板引擎,也不知道模板字符串。slots就是在组件中插入内容的机制。

在<p>等原生的标签里插入内容很简单,就直接写就行了(说了一句废话),而在组件中写入内容就有讲究了,比如<children>我还是个宝宝</children>,

由于组件的模板一般是一堆原生标签一起构成的,那么上面这么写,究竟应该把内容插到那个元素中就成了问题。于是就有了<slot></slot>元素。

solt元素就是用来接受父组件放到子组件的内容的。不知为什么,到了这里我会想起学习机上插游戏卡的例子。。。举个例子:

//学习机组件
<div>
<h2>小霸王学习机</h2>
<slot>
内置魂斗罗
</slot>
</div>
//小朋友父组件

 
<div>
  <h1>我要玩游戏</h1>
  <xue-xi-ji>
    <p>插入双截龙游戏卡</p>//插入的内容
  </xue-xi-ji>
</div>

 最后得到的就是小学生愉快的玩双截龙了

<div>
<h1>我要玩游戏</h1>
-------------------------------组件区域——————————————
<h2>小霸王学习机</h2>
————————slot区域——————————————
<p>插入双截龙游戏卡</p>//插入的内容
</div>

当父组件不往子组件标签中添加任何字符时,子组件会显示默认内容,如果有的话,也就是说魂斗罗。。

具名slot是说组件中有大于一个地方需要插值时,需要给slot取个名字。就像电脑的接口,有usb的,也有接投影的HDMI接口,为的是将多条内容放到正确的地方。我们知道,在组件内部,this指向组件自己,那么组件的slot内容可以通过this.$slots获得被插入的vnode节点。

动态组件

动态组件就是为了适应页面的局部刷新而生的,举个我用过的例子:todolist在线小demo

当我点击写日记button时,页面会变成一个markdown编辑器界面。这就是动态组件。实现的代码如下

<keep-alive>
<compoment v-bind:is='currentview'></compoment>
</keep-alive>

  

methods: {
toggleview: function() {
this.currentview = (this.currentview == 'todolist') ? 'write' : 'todolist';
}
},

当我点击上面的button时,触发toggleview方法,导致is绑定的组件名发生变化,如果当前是write组件,那么变成todolist组件。那么<keep-alive>标签又有什么用呢?标签字面意思是活着。。就是当todolist组件由显示变成隐藏时,

组件的数据状态会被保存下来而不是被完全destory,当组件由隐藏再次变为显示时,当前的状态得以保留。比方你在write组件中写一段md文档,然后切换回todolist组件,如果没有keep-alive组件,再切换回write组件时,之前编辑的东西就会丢失。

#与自定义元素的关系

你可能已经注意到 Vue 组件非常类似于自定义元素——它是 Web 组件规范的一部分,这是因为 Vue 的组件语法部分参考了该规范。例如 Vue 组件实现了 Slot API 与 is 特性。但是,还是有几个关键差别:

  1. Web 组件规范仍然处于草案阶段,并且尚无浏览器原生实现。相比之下,Vue 组件不需要任何补丁,并且在所有支持的浏览器 (IE9 及更高版本) 之下表现一致。必要时,Vue 组件也可以包装于原生自定义元素之内。

  2. Vue 组件提供了纯自定义元素所不具备的一些重要功能,最突出的是跨组件数据流,自定义事件通信以及构建工具集成。

vue.js组件(component)的更多相关文章

  1. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  2. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  3. 浅尝Vue.js组件(一)

    本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...

  4. Vue.js 组件编码规范

    本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...

  5. 如何理解vue.js组件的作用域是独立的

    vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...

  6. Vue.js 组件的三个 API:prop、event、slot

    组件的构成 一个再复杂的组件,都是由三部分组成的:prop.event.slot,它们构成了 Vue.js 组件的 API.如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后 ...

  7. Vue.js组件的重要选项

    Vue.js组件的重要选项 实例化Vue对象一些很重要的选项,Vue的所有数据都是放在data里面的,Vue的参数是个对象,对象里面的字段叫做data,data里面也是对象,data也可以写作是thi ...

  8. Vue.js组件学习

    组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素.组件系统提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用. 一个简单组件例子(全局注册) &l ...

  9. Vue.js组件示例

    一 外部引入文件:(全局注册) //建模版 var mycomponent=Vue.extend( {template:"<div><a href='#'>我爱Jav ...

随机推荐

  1. kubernetes实战(十五):k8s使用helm持久化部署jenkins集成openLDAP登录

    1.基本概念 Jenkins在DevOps工具链中是核心的流程管理中心,负责串联系统的构建流程.测试流程.镜像制作流程.部署流程等,在持续集成中常用到的工具如下: Maven:源代码编译工具 Robo ...

  2. 机器学习理论基础学习3.5--- Linear classification 线性分类之朴素贝叶斯

    一.什么是朴素贝叶斯? (1)思想:朴素贝叶斯假设    条件独立性假设:假设在给定label y的条件下,特征之间是独立的    最简单的概率图模型 解释: (2)重点注意:朴素贝叶斯 拉普拉斯平滑 ...

  3. javascript unicode与GBK2312(中文)编码转换示例

    一个javascript的unicode与GBK2312编码相互转换的方法. 代码: var GB2312UnicodeConverter = {     ToUnicode: function (s ...

  4. Leetcode: Longest Consecutive Sequence && Summary: Iterator用法以及ConcurrentModificationException错误说明

    Given an unsorted array of integers, find the length of the longest consecutive elements sequence. F ...

  5. linux cut字符串切割

    linux字符串列截取  cut  -d ‘分割条件’ -f ‘列数’ [root@LocalWeb01 ~]# less  /etc/passwd | grep '^user' | grep -v ...

  6. pycharm 设置文件编码的位置:Editor-->File Encodings

    打开设置-->Editor-->File Encodings 

  7. 测试开发-web测试要点

    参数输入考虑 参数数值包含1个.多个.很多个.null.参数值前后包含空格的2种情况   数字类型:正数.负数.0.0.0.+0.0.-0.0.指数.对数.分数.小数.复数.科学计数法的测试,全角的数 ...

  8. node.js cookie session使用教程

    众所周知,HTTP 是一个无状态协议,所以客户端每次发出请求时,下一次请求无法得知上一次请求所包含的状态数据,如何能把一个用户的状态数据关联起来呢? cookie 首先产生了 cookie 这门技术来 ...

  9. js 变量 作用域及内存

    由于Javascript是松散型的,所以其变量只是在特定时间用于保存特定值的一个名字而已,并不存在某个变量必须保存某种类型的值的规则,变量的值以及其数据类型都可以在脚本的声明周期内改变 一.基本类型与 ...

  10. Window下PHP三种运行方式图文详解,window下的php是不是单进程的?

    Window下PHP三种运行方式图文详解,window下的php是不是单进程的? PHP运行目前为止主要有三种方式: a.以模块加载的方式运行,初学者可能不容易理解,其实就是将PHP集成到Apache ...