组件-插槽-默认内容
实现目的:如果外面不给传, 想给个默认显示内容 口诀: 夹着内容默认显示内容, 如果不给插槽slot传东西, 则使用夹着的内容在原地显示
组件-具名插槽
使用场景:当一个组件内有2处以上需要外部传入标签的地方 入的标签可以分别派发给不同的slot位置
要求: v-slot一般用跟template标签使用 (template是html5新出标签内容模板元素, 不会渲染到页面上, 一般被vue解析内部标签) ==v-slot可以简化成#使用==
v-bind可以省略成: v-on: 可以省略成@ 那么v-slot: 可以简化成#
总结: slot的name属性起插槽名, 使用组件时, template配合#插槽名传入具体标签
组件-作用域插槽
使用环境:子组件里值, 在给插槽赋值时在父组件环境下使用 口诀:
- 子组件, 在slot上绑定属性和子组件内的值
- 使用组件, 传入自定义标签, 用template和v-slot="自定义变量名"
- scope变量名自动绑定slot上所有属性和值 总结: 组件内变量绑定在slot上, 然后使用组件v-slot="变量" 变量上就会绑定slot身上属性和值
组件-作用域插槽
插槽可以自定义标签, 作用域插槽可以把组件内的值取出来自定义内容
自定义指令-注册
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。 v-xxx
html+css的复用的主要形式是组件
需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令
局部注册与 全局注册
全局注册自定义指令, 哪里都能用, 局部注册, 只能在当前vue文件里用
小结
我们为什么要自定义指令?
- 在Vue内置指令满足不了需求时, 可以自己定义使用
v-model的本质
v-model实际上实现的是什么?
- 向标签内的value属性赋值
- 给标签绑定input事件, 并把收到的值, 赋予给vue变量
随机送上相关面试题。
1. vue中solt的使用方式,以及solt作用域插槽的用法
使用方式:当组件当做标签进行使用的时候,用slot可以用来接受组件标签包裹的内容,当给solt标签添加name属性的 时候,可以调换响应的位置 (高级用法) 插槽作用域: 当传递的不是单一的标签, 例如需要循环时, 把要循环的标签传入, 组件内使用v-for在slot标签上, 内部可以v-bind:把值传出来, 再外面把值赋予进去, 看示例
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</current-user>
// current-user组件, user属性和值, 绑定给slotProps上
<span>
<slot v-bind:user="user">
{{ user.lastName }}
</slot>
</span>
2. 自定义指令(v-check、v-focus)的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?
全局定义指令:在vue对象的directive方法里面有两个参数,一个是指令名称,另外一个是函数。组件内定义指令:directives
钩子函数:bind(绑定事件触发)、inserted(节点插入的时候触发)、update(组件内相关更新)
钩子函数参数:el、binding