重识props(校验)
- 普通的数组类型['属性名']
- 没有校验功能
- 进阶对象类型
- (1)required:true (必填项)
- (2)default:"默认值"
- 基本数据类型,直接写数据
- 引用数据类型,要写()=>xxx(函数加返回值)
- (3)自定义类型
- 当属性传入,validator函数会自动执行,接收参数
- 返回值为true,则校验通过
- (4)type检测数据类型
status: {
// 当属性传入，validator会自动执行,接收参数
// 如果validator函数返回true,表示校验通过
validator: function (value) {
console.log(value)
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
},
内置的组件component
- 语法:
<component :is="comName"></component>可以动态显示组件 - 注意点:
- is只能是动态属性=>
:is="组件注册后的标签名字符串或data变量" - 不能直接拿注册标签名赋值使用
- 在操作切换时会创建另一个,销毁自己
keep-alive组件
- 语法:在外部加一个
<keep-alive> </keep-alive>标签 - include="组件名1,组件名2..."
- :include="['组件名1'， '组件名2']"
注意: 匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)
-
作用:可以缓存数据,不会被销毁
外加两个生命周期
activated - 激活deactivated - 失去激活状态
<keep-alive>
<!-- vue内置的组件component, 可以动态显示组件 -->
<component :is="comName"></component>
</keep-alive>
插槽
1. 什么是插槽
- 组件通过插槽传入自定义结构
- 用于实现组件的内容分发,通过slot标签,可以接收到写在组件标签中的内容
- vue提供组件插槽功能,允许开发者在封装组件时,把不确定的部分定义为插槽
2.使用方法
- 定义:
<template>
内容1
<slot>默认内容</slot>
内容2
</template>
- 使用
<MyCom>
<h1>内容</h1>
</MyCom>
类似覆盖掉slot里面的数据,当没有slot时,没有数据
在父传子中
1.传数据,自定义属性 (父) props(子)
2.传结构,在组件中写内容 (父) slot(子)
3.具名插槽
- 定义:
<slot name="xxx"> - 使用:
<template #xxx></template>
<template v-slot:xxx></template>
- 注意点:
- 传入的标签可以分别派发给不同的slot位置
- v-slot一般跟template标签使用 (template是html5新出标签内容模板元素, 不会渲染到页面上, 一般被vue解析为内部标签)
4.自定义指令
- 语法1:对象
directives:{
指令名(a,b){不是靠返回值,靠配置项}
}
a,b叫配置对象
a指向dom实例(elemet元素)
b指向配置对象(关系表达式)=>binding绑定
对象的完整用法
指令名:{
bind(a,b){绑定时,一上来},
inserted(a,b){元素插入页面时},
updata(a,b){模块重新解析时}
往往bind的数据与updata的数据相同
}
- 语法2:函数
directives:{
指令名:回调函数{不是靠返回值,靠配置项}
}
如果是函数时,函数什么时候被调用
1.指定与元素成功绑定时(一上来)
2.指定所在的模块被重新解析时
即:当绑定的元素被读写时,函数被重新调用
注意:所有的命令的this指向=>window
