Vue.js之组件(component)
从结构上看,组件之于实例,就好比轮子之于汽车。从属性和方法来看,组件有实例的大部分方法,如果Vue实例是孙悟空,组件就好比实例的一个毫毛,变化多端却为Vue实例所用。
目录:
组件的注册
is的作用
event,props,solts
动态组件
组件的注册(差不多抄官网)
有两种方式注册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
}
});
is的作用
将组件挂载到已存在元素上时,遇到某些元素,会发生尴尬的事情:如<ul> , <ol>
, <table>
,<select>这些标签,他们只认识<li>,<tr>,<option>这些标签,想把<my-component>插进去,人家不认识,这时就要is发挥作用了:
<ul>
<my-component></my-component>
</ul>
上面这样浏览器不给面子,需要变成这样:
<ul>
<li is='my-component'></li>
</ul>
当使用单文件组件时,就当上面是废话,也就是说<ul>中可以有组件了。(见这里)动态组件也有一个is属性,用来切换不同的组件,我们下面再说
props,events,slots
下面说说我觉得组件中的三个重点:prop,events和slots。当我看到组件这部分时,之前没有接触过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.js之组件(component)的更多相关文章
- Vue.js多重组件嵌套
Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...
- Vue.js之组件嵌套
Vue.js中组件嵌套有两种方式 第一种:注册全局组件 例如在components文件夹下新建一个User.vue组件,然后在main.js文件中注册全局组件 //注册全局组件 Vue.compone ...
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- Vue.js之组件传值
Vue.js之组件传值 属性传值可以从父组件到子组件,也可以从子组件到父组件. 这里讲一下从父组件到子组件的传值 还以上次的demo为例,demo里有APP.vue是父组件,Header.vue,Us ...
- Vue.js之组件嵌套小demo
Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...
- vue.js 同级组件之间的值传递方法(uni-app通用)
vue.js 兄弟组件之间的值传递方法 https://blog.csdn.net/jingtian678/article/details/81634149
- Vue.js说说组件
什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...
- VUE JS 使用组件实现双向绑定
1.VUE 前端简单介绍 VUE JS是一个简洁的双向数据绑定框架,他的性能超过ANGULARJS,原因是实现的机制和ANGULARJS 不同,他在初始化时对数据增加了get和set方法,在数据se ...
随机推荐
- 【慕课网实战】Spark Streaming实时流处理项目实战笔记五之铭文升级版
铭文一级: 单节点单broker的部署及使用 $KAFKA_HOME/config/server.propertiesbroker.id=0listenershost.namelog.dirszook ...
- VB网络编程中Winsock的使用
原文链接:http://tech.163.com/06/0407/14/2E46BB930009159S.html 如同上面的内容所描述的,不论您使用UDP协议或是TCP协议,Winsock控件都可以 ...
- Linux学习(1)- TCP/IP网络协议基础
Linux学习(1)- TCP/IP网络协议基础 一.TCP/IP 简介 学习内容 TCP/IP(Transmission Control Protocol/Internet Protocol)是传输 ...
- 自定义cell的高度
// // RootTableViewController.m // Share // // Created by lanouhn on 15/1/20. // Copyright (c) 2 ...
- Java理论学时第五节。课后作业。
随机生成10个数,填充一个数组,然后用消息框显示数组内容,接着计算数组元素的和,将结果也显示在消息框中. 设计思路:先声明一个数组,再利用for循环对每一个元素赋随机生成的值,在求所有数的和,再根据要 ...
- webView自适应及缩放
WebView wv=(WebView) findViewById(R.id.webView); wv.setVisibility(WebView.VISIBLE); WebSettings ws = ...
- java poi 合并单元格
java poi 合并单元格 2017年03月29日 16:39:01 翠烟你懊恼 阅读数:26561 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.n ...
- 用jquery监听输入数字的变化
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- shell 中的 && 和 ||
shell 中的 && 和 || 简言之,shell 中 && --左边的命令执行成功才会执行右边的命令. || -- 左边的命令执行失败才会执行右边的命令.
- 如何处理由Dll缺失造成的程序直接崩溃的问题。
问题描述:在开发一个上位机程序时(C#.winform),使用到了Kvaser的SDK,而这个SDK是基于对应的Kvaser驱动开发的.当前PC如果没有装Kvaser驱动, 程序启动时,会直接奔溃.调 ...