1.props校验
普通的 props:["prosA"]
//校验数据
props:{
type:类型
required:
default:'' || () =>[]
validator : val=>{
}
}
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
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 ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
2.动态组件
● is只能是动态属性=》:is=“组件注册后的标签名字符串或data变量” ● 不能直接拿注册标签名赋值使用
vue内置component组件, 配合is属性, 设置要显示的组件标签名字
<template>
//动态显示组件使用 vue内置
//动态绑定is ,他的值就是组件名字
<components :is="变量" > </components>
</template>
**变量最好用组件来方便使用**
components:{
组件名
}
作用: 动态载入组件,component (理解一个容器,装入各种组件)
有应用场景 :tab切换
keep-alive
组件缓存
**作用 :保存组件 ,在组件 切换的失后,不被销毁 (减少ajax传输增加服务器压力)
**
2.1它会让被缓存的组件多出两个钩子 ● activated - 激活 ● deactivated - 失去激活状态
组件切换会导致组件被频繁销毁和重新创建, 大多数情况下是有自己的意义的,但也可能会导致不必要的性能损耗
使用Vue内置的keep-alive组件, 可以让包裹的组件保存在内存中不被销毁
<keep-alive> <component :is="xxxx" /> </keep-alive>
2.2组件进阶-keep-alive组件-指定缓存
//掌握keep-alive的include属性的用法语法
1. include="组件名1,组件名2..."
2. :include="['组件名1', '组件名2']"
<keep-alive include="name1,name2">
<!-- vue内置的组件component, 可以动态显示组件 -->
<component :is="comName"></component>
</keep-alive>
3.插槽
3.1默认插槽
3.2组件进阶-具名插槽
定义: <slot name="xxx">
使用:
● <template #xxx></template>;
● <template v-slot:xxx></template>
作用: 允许传入自定义结构
3.3理解方法
//子组件 在组件内部挖坑
<slot> 默认(匿名)插槽,没有名字坑 </slot>
<slot name=" one"> 具名插槽,有名字坑 </slot>
//填坑 //父组件 //使用组件时,用自己内容去填坑
//写法二
<template v-slot:one>
// one 填坑
<p>tow</p>
< /template >
//写法一
<template #one>
// one 填坑
<p> one的内容 </p>
< /template >
- 传入的标签可以分别派发给不同的slot位置
- v-slot一般跟template标签使用 (template是html5新出标签内容模板元素, 不会渲染到页面上, 一般被vue解析为内部标签)
4.作用域插槽
原理:
步骤:● 创建子组件, 准备slot, 在slot上绑定属性和子组件值
● 使用子组件, 传入自定义标签, 用template和v-slot=“自定义变量名”
● 自定义变量名会自动绑定slot上所有属性, 就可以使用子组件内值, 并替换slot位置
● 具名插槽, 给slot绑定属性和值
应用场景:自定义的表格组件,
允许用户传入:自定义的结构 + 数据(从插槽中回传的)
4.1作用域插槽 小结 : 组件内变量绑定在slot上, 然后使用组件v-slot:插槽名字=“变量” ,变量上就会绑定slot传递的属性和值
5.自定义指令(了解)
作用:vue提供的指令不够用了,自己定义拓展,增强 元素的功能
定义:
例如
<p v-color="red"/>
使用: <标签 v-指令名="值"/>