Vue组件，动画笔记，必看

组件：

作用：

1.组件时Vue的一个重要的特点

2，实现多人协作开发

3，通过组件划分降低开发的难度

4，实现复用，降低重复劳动

组件解释：

组件就是定义好的一功能模块

建议：多用props，少在组件中使用data（降低组件的耦合性，提高复用性）

定义与使用

1，定义

注意：template有且只有一个根节点

const steper={
temlate`<span></span>`
}

2，在父组件中注册

compoments：{steper}

3，在组件的模板中使用

<steper></steper>

传参：

父传子：

父组件中：

<modal:visible="visible">

子组件中：

props：{
	visible：{type：Boolean，default：false}
}

子使用

注意：vue时单项数据流，父组件传递给子组件的props是只读（不能修改）

this.visible

子传父：

子组件：

this.$emit("update":visible",false)

父组件：

监听事件，修改值

<model @update:visible="visible=$event"

插槽：

父组件中：

<model>
<input/>
<button></button>
</model>

子组件中：

template:`<div><slot></slot></div>`

动画：

所谓动画就是两个动画形成的过度

进入和离开

v-if v-show

transition 单个动画元素

属性:

name名称

enter-active-class=""指定进去class

leave-active-class=""指定离开class

产生状态与类:

在css下面写Vue不会直接提供动画效果~~

.v-enter-active进入整个状态

.v-enter 进入开始状态

.v-enter-to进入结束状态

.v-leave-active离开整个状态

.v-leave 离开开始状态

.v-leave-to离开结束状态