那些Vue3实用的小知识（结尾更精彩！）那些Vue3实用的小知识（结尾更

接上一篇，我们继续来看一下那些vue3中实用的小知识！ 1 directives指令自定义指令，访问到dom节点

directive:{ "focus":{ mounted(el,binding){ //el 当前指令所在的 dom // binding指令相关信息 // binding.value 指令的值 } } }

钩子函数

created：创建 beforeMount：父组件挂载前 mounted：挂载后 beforeUpdate：更新前

2 components组件 1.组件:一个小的功能分区
【那些Vue3实用的小知识（结尾更精彩！）】意义：复杂项目拆分简单的组件，让团队开发更高效，组件是可以重复使用的模块
理解：组件其实就是个小的Vue，具有data，methods，watch，computed
组件的定义

const steper = {template:`...`}

组件注册

components:{steper}

组件的使用

2.组件的参数传递
01 父传子props

steper内部使用(只读，不能修改)

props:{value:{type:Number,default:1}} this.value

02 子传父emit事件在steper内部

this.$emit("numchange",this.num)

numchange事件名称，this.num 事件值
父组件

$event 就是子组件通过numchange传递过来的值 this.num
3.插槽

嵌套内容

可以通过slot获取组件的嵌套内容

4.命名插槽

5.插槽的作用域
子

父

3 动画 Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件，自动对显示与隐藏的元素添加类名
1.动画过渡
进入整个过程

.v-enter-active

进入开始状态

.v-enter-from

进入结束状态

.v-enter-to

离开的过程

.v-leave-active

离开开始状态

.v-leave-from

离开结束状态

.v-leave-to

2.transition
mode模式分为in-out和out-in
自定义进入class名称

.enter-active-class

自定义离开class名称

.leave-active-class

3.列表过渡
我们会使用组件实现列表过渡

tag 包裹标签名 .v-move正在移动的的元素

4 节点引用ref 可以使用 ref attribute 为子组件或 HTML 元素指定引用 ID

this.$refs.inp this.$refs.btn.add() 访问组件的方法 this.$refs.btn.num 访问组件的属性

5 cmd命令