关于vue3:那些Vue3实用的小知识结尾更精彩

1 directives指令

自定义指令，拜访到dom节点

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

钩子函数

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

意义：简单我的项目拆分简略的组件，让团队开发更高效，组件是能够重复使用的模块
了解：组件其实就是个小的Vue，具备data，methods，watch，computed
组件的定义

const steper = {template:`<span>...</span>`}

组件注册

components:{steper}

组件的应用

<steper></steper>

<steper :value="5">

steper外部应用(只读，不能批改)

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

在steper外部

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

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

<steper @numchange="w1=$event">

$event 就是子组件通过numchange传递过去的值 this.num

<step> 嵌套内容 </step>

能够通过slot获取组件的嵌套内容

<slot></slot>

<step>   <template v-slot:pre>        pre插槽内容  </template></step><slot name="pre"></slot>

子

<slot item="item">

父

<step>  <template v-slot:default="scope">   {{scope.item}}  </template></step>

Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡成果的组件，主动对显示与暗藏的元素增加类名

进入整个过程

.v-enter-active

进入开始状态

.v-enter-from

进入完结状态

.v-enter-to

来到的过程

.v-leave-active

来到开始状态

.v-leave-from

来到完结状态

.v-leave-to

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

.enter-active-class

自定义来到class名称

.leave-active-class

咱们会应用 <transition-group> 组件实现列表过渡

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

能够应用 ref attribute 为子组件或 HTML 元素指定援用 ID

<input ref="inp">this.$refs.inp<btn ref="btn">this.$refs.btn.add() 拜访组件的办法this.$refs.btn.num 拜访组件的属性