组件
- 组件：一个小的功能分区
- 意义：复杂项目拆分成简单的组件，让团队开发更高效，组件是可以重复使用的模块
- 理解：组件其实就是个小的vue，具有data，methods，watch，computed
- 组件的定义：
const steper = {template:`<span>......</span>`}
- 组件注册
componets:{steper}
- 组价的使用
<steper></steper>
- 组件的参数传递
父传子props
<steper :value="5">
steper内部
props:{value:{type:Number,default:1}}
steper内部使用（只读，不修改）
this.value
子传父emit
在steper内部
this.$emit("numChange",this.num)
numChange事件名称，this.num 事件值
父组件
<steper @numChange="w1 = $event">
$event 就是字组件通过numChange传递过里的值this.num
- 插槽
<step>嵌套内容</step>
可以通过<slot></solt>获取组件的嵌套内容
- 命名插槽
<step>
<template>
pre插槽内容
</template>
</step>
<slot name="pre">
- 插槽的作用域
子
<slot item ="item">
父
<step>
<template v-slot:default="scope">
{
{scope.item}}
</template>
</step>
动画<transtion>
- 自动对显示与隐藏的元素添加类名
- .v-enter-active进入整个过程
.v-enter-from进入开始状态
.v-enter-to进入结束状态
- .v-leave-active开始的过程
.v-leave-from离开开始状态
.v-leave-to离开结束状态
- <transtion>
mode模式
in-out
out-in
name：名称
enter-active-class自定义进入class名称
leave-active-class自定义离开class名称
<transtion-group>
tag 包裹标签名
.v-move正在移动的元素
节点引用ref
<btn ref="btn">
this.$refs.btn.add() 访问组件的方法
this.$refs.btn.num 访问组件的属性