Vue 组件
来源:互联网 发布:李德毅抄袭 知乎 编辑:程序博客网 时间:2024/05/02 00:16
1、注册方式
Vue.Component(name,object);//通过Vue的一个静态函数创建
2、props
Vue.component('myComponent',{ props[], template:''});
组件被注册的时候,随之也创建了一个作用域,在组件的内部对组件上的参数的访问无效的。怎么解决这个问题呢,也就是这个props,一个参数数组,可以理解为函数的形参,如
props['myIndex','myValue']
如何使用呢,在组件使用的时候对其形参赋值,通过这样就可以在组件内部使用形参来操作了。个人理解其原理如调用函数给函数传递参数一般。
<myComponent (index,value) in items v-bind:myIndex='index' v-bind:myValue='value'></myComponent>
可以对参数进行验证这里引用官方的案例
验证的type是原生的类型:Object、Function、String、Number、Array、Boolean
Vue.component('example', { props: { // 基础类型检测 (`null` 意思是任何类型都可以) propA: Number, // 多种类型 propB: [String, Number], // 必传且是字符串 propC: { type: String, required: true }, // 数字,有默认值 propD: { type: Number, default: 100 }, // 数组/对象的默认值应当由一个工厂函数返回 propE: { type: Object, default: function () { return { message: 'hello' } } }, // 自定义验证函数 propF: { validator: function (value) { return value > 10 } } }})
3、data
data必须是一个方法,若不是,vue会报错
data:function(){}
可以在data方法里创建局部变量,但这样对引用类型无效,因为他们都指向同一个地址。也可以通过使用计算属性的方式。思想就是,创建一个原数据的副本
props:['p1'],data:function(){ {counter:p1} //在组件的实例里使用counter就ok}
props:['p1'],computed:{ c1Clone=function(){ return //处理p1 }}
3、事件
每个Vue都实现了事件接口(Events interface),
监听:$on(eventName)触发:$emit(eventName)
Vue的事件系统分离自浏览器的EventTarget API,但$on、$emit
不是addEventListener、dispatchEvent
的别称
不能用$on侦听子组件抛出的事件,而必须在模板里直接用v-on绑定
在组件上的根元素上监听原生时间,可以用native修饰
<my-component v-on:click.native='doSomething'></my-component>
4、通信
1、非父子组件
使用一个空vue作为中央事件的总线
var bus = new Vue();bus.$emit('id-selected',1)//触发a中的事件bus.on('id-selected',function(){})// 在组件 B 创建的钩子中监听事件
5、父子组件
什么是父子组件呢?说简单一点就是组件嵌套
Vue.component('child',{ //.....}Vue.component('parent',{ template:'...<child></child>....' //....}//这里child嵌套在parent中,parent就为父组件,child为子组件
6、内容分发slot
首先搞清楚几个概念:
什么是分发?Vue给出的官方解释为:为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板,这个过程被称为 内容分发。直白点说,就是组合【父子】组件的一种方式。
为什么需要分发?单个组件的功能是有限的,所以需要将这些组件进行整合。在组件进行组合的过程中会涉及比如内容重叠,需要通信的情况。并且组件都有自己的作用域,他们都要在自己的作用域内编译。怎样解决这些问题?
编译作用域:上面提到编译作用域,也就是父组件在父组件作用域内编译,子组件在子组件作用域内编译。也就是注册组件时候,花括号的作用域。如下
如果要将属性绑定到组件的根节点,那就应该在组件自己的模板上操作。
Vue.component('child-component', { // 有效,因为是在正确的作用域内 template: '<div v-show="someChildProperty">Child</div>', data: function () { return { someChildProperty: true } }})
分发内容是在父作用域内编译
怎样分发?
首先来看官方的教程:
打个比方,生活中有种父子关系是通过收养或者家庭重组得来的。继父通过正常的法律途经(模板)将继子变成合法的儿子。继父有他自己的财物,继子有他自己的财物。在进行家庭物质重组的时候,继父说:“我有一些房和车要给你。”继子可以说:“我不要”(没有slot接口),或者“给我吧)(有slot接口)。这样再把这个家庭组合起来。
其实就是一个合并的过程
具名的slot
作用域插槽
带有scope特殊属性的template元素,表示它是一个作用域插槽的模板。scope=’临时变量名’,这个变量是一个对象。
父组件模板<div> <template scope='props'> <p>{{props.text}}</p> </template></div>
子组件模板<div> <slot text="插槽"></slot></div>
同样,作用域插槽也可以是具名的
7、动态组件
通过保留的<component>
元素,绑定到它的is属性上,我们可以通过两种方式来绑定
使用:
<component v-bind:is='currentCom'></component>//currentCom为vue实例中的数据属性
new Vue({ //... data:{ currentCom:'com1'//这里是本作用的属性名 }, components:{ com1:{...}, com2:{...}, com3:{...} }});或者:var com={...}new Vue({ data:{ currentCom:com//这里是对象不加‘’ }});
将切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。我们可以给它添加一个keep-alive
指令参数
<keep-alive> <component :is="currentView"> <!-- 非活动组件将被缓存! --> </component></keep-alive>
Vue组件的API来自三个,props/evnets/slots
Props : 允许外部环境传递数据给组件Events : 允许组件触发外部环境的副作用Slots : 允许外部环境将额外的内容组合在组件中。
8、子组件索引
在Vue中如何直接访问到子组件呢,Vue提供了ref
用来为子组件添加索引,Vue的实例中有一个$refs
属性,它是一个数组或是对象,包含了添加了ref
的所有子组件。
<my-componnent ref='profile'></my-component>var vm = new Vue({});var com= vm.$refs.profile;//这样就可以访问到子组件了
注:$refs
只在组件渲染完成后才填充,并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案——应当避免在模版或计算属性中使用 $refs
对低开销的静态组件使用v-onece,渲染一次,然后缓存
template:'<div v-onece>...</div>
- vue 组件
- Vue组件
- vue 组件
- vue组件
- Vue组件
- VUE---组件
- Vue组件
- Vue 组件
- vue组件
- Vue-组件
- vue-组件
- vue组件
- vue 组件
- vue组件
- Vue组件
- 【Vue.js】-Vue.js组件
- 【Vue】详解Vue组件系统
- 【Vue】详解Vue组件系统
- 动态sql语句拼接查询条件
- 16:踩方格
- Java数组练习(一)打印输出指定数组所有元素
- bitmapImage.EndInit();引发异常:未找到适用于完成此操作的图像处理组件。
- HDU-FatMouse's Speed
- Vue 组件
- 责任链模式
- 最长上升子序列
- LoadRunner
- 机器学习总结(四):RF,SVM和NN的优缺点
- 指针的使用(1)
- 上升子序列
- Java 8: 元空间(Metaspace)
- 【死磕Java并发】-----J.U.C之并发工具类:CyclicBarrier