(重点)slot--插槽
- 在组件内部挖坑
- 使用组件时，用自己的内容去填坑
- 在子元素身上挖坑让父元素来填坑
- 插槽同时可以设置name 取一个名字这样就可以给指定的slot设置指定的内容 如果不取名字一旦插槽多了 就会乱套
作用域插槽
-
自定义的表格组件，允许用户传入：自定义的结构 + 数据（从插槽中回传的）
-
原理
-
props校验
-
之前我们学过props 作用是接收父元素穿过来的值 格式是: props:{'自定义属性名','自定义属性名',...}
-
props校验可以说是props的升级版
-
语法
props:{
自定义属性名: { type: 类型,
required: true ,
default: '' || ()=> [] validator: val =>{}}}
- props常见的类型
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
}
}
}
动态组件 固定语法
<component :is="变量"></components>
- 变量就是compoents中的组件名
- 作用: 动态载入组件。component理解一个容器，装入各种组件 ,一般用在tab切换
keep-alive 组件缓存
- 作用: 保存组件，在组件切换的时候，不被销毁
- 格式 :
<keep-alive>
<component :is="变量"></components>
<keep-alive>
- 之前我们知道钩子函数有八个 学习完组件缓存之后我们又认识了 两个新钩子
- activated-----激活
- deactivated---失活
- 自定义指令
- 在vue中我们学习了很多的v-xxx之类的指令但是呢 在代码世界中这点指令往往是不够的 所以我们需要自己定义指定 好处是可以增强 拓展元素的功能
格式
<标签 v-指令名="值" />
定义
努力吧 毕竟想要的往往需要付出大量的努力
