组件-插槽
当组件某一部分的标签不确定时， 可以使用插槽，它可以让组件更灵活、复用性更高、功能更强大。
基本语法
- 1 在子组件中需要用到插槽的位置，使用
<slot></slot>占位 - 2 使用组件时，在组件标签中定义满足要求的标签 栗子
<Pannel>自定义变量<Pannel>
具名插槽
1 可以让一个组件内，有多处自定义标签的能力
2 使用方法：
- 在子组件中使用
<slot></slot>占位，并设置name属性 - 使用组件时 ，在组件标签内使用
<template></template>标签中 结合v-slot：指令来设置name值
<Pannel>
<template v-slot:title></template>
</Pannel>
- v-slot: 可以简写为 #
<Pannel>
<template #title></template>
</Pannel>
作用域插槽
1 可以在使用组件时 访问子组件里的数据
2 使用方法 ：
- 在子组件中使用
<slot></slot>占位 并使用 v-bind绑定数据给 slot标签
<slot :row="obj"></slot>
- 使用组件时, 在
<template></template>标签上使用 v-slot="变量名" 取值使用,(如果有name值可以简写成 #自定义名=“scope” 调用数据时用 scope.row)
<Pannel>
<template v-slot="scope"></template>
</Pannel>
scope 是自定义变量
scope:{row:obj}
自定义指令
当Vue自带的指令 无法高效的满足开发需求时 可以使用自定义指令
- 语法如下：
全局注册
Vue.directive(
指令名 {
inserted(el) {
// 当元素插入到 DOM 时调用
}
})
局部注册
在组件内和 data / methods 平级的地方, 设置 directives, 属性名就是指令名, 属性值就是指令配置对象, 其他同上
组件知识点补充：
- ￥refs 可以用来获取原生DOM 和 组件对象，也可以使用组件对象方法。语法：1 给组件标签添加 ref属性 。2 this.$refs.ref属性名
- nextTick(() => {}) 或 await this.$nextTick()// 操作 DOM
- v-model 的原理 ：1. 给组件使用 v-bind 绑定 value 属性 2. 给组件使用 v-on 绑定 input 事件
