Vue的组件与动画

一、什么是组件

组件就是定义好的一个功能模块。在使用组件的时候建议，多用props，少在组件中使用data以降低组件的耦合性，提高组件的复用性。

二、为什么要使用vue的组件

1、组件是vue的一个很重要的特点

2、vue可以实现多人协作开发

3、可以通过组件划分降低开发代码的难度

4、组件可以实现复用，降低重复劳动

三、怎么使用组件

首先，要先对组件进行定义

const step = {
    template:`
    <span></span>
`
}
//注意，在定义的时候，有且只有一个根节点

其次，要注册组件：在父组件中使用components

new Vue ({
    el: "#app",//id名称
    components:{ step: step },//可以简写为components:{ step }
})

最后，使用：在组件模板中使用：<step></step>

<div id="app">
    <step></step>
</div>

四、组件中的传参问题

1、父传子

//例：
    //父：
    <modal: visible="visible">
    //子
    props: {
        visible: {
            type: Boolean,
            default: false,
        }
    }

子使用时需要注意：vue是单向数据流，父组件传递给子组件的props是只读（不能修改）this.visible

2、子传父

//例：
//子
this.$emit("update:visible",false)//发送
//父监听事件，修改值
<modal @update:visible="visible=$event">

3、关于插槽

插槽即组件的嵌套内容

//父：
<modal>
    <input type="text">
    <button>确定</button>
</modal>
//子组件模板中使用
template:`
    <div>
        <slot></slot>
    </div>
`

五、Vue中的动画

vue的动画，即两个状态间形成的过度效果

进入和离开（v-show、v-if）

1、transition：单个动画

（1）动画中的属性

name：名称

enter-active-class：指定进入动画

leave-active-class：指定离开动画

（2）产生状态与类

在动画执行过程中会改变两个状态和四个类

v-enter-active：进入整个状态的类

        v-enter：进入开始的状态

        v-enter-to：进入结束的状态

v-leave-active：离开整个状态的类

        v-leave：离开开始的状态

        v-leave-to：离开结束的状态

2、transition-group：动画组

属性

tag：用什么标签包裹所有的动画组元素

产生状态与类

（1）通过transition

（2）v-move：正在移动中的元素