vue第七节

Vue里组件的通信

通信：传参、控制（A操控B做一个事件）、数据共享

模式：父子组件间、非父子组件

1. 父组件可以将一条数据传递给子组件，这条数据可以是动态的，父组件的数据更改的时候，子组件接收的也会变化

   子组件被动的接收父组件的数据,子组件不要再更改这条数据了

1. 父组件如果将一个引用类型的动态数据传递给子组价的时候，数据会变成双向控制的，子组件改数据的时候父组件也能接收到数据变化,因为子组件改的时候不是在改数据(地址)，而是在改数据里的内容，也就是说引用类型数据的地址始终没有变化，不算改父组件数据

   父子间数据共享（双向控制）,基本不会使用，违背了单向数据流

2. 父组件可以将一个方法传递给子组件，子组件调用这个方法的时候，就可以给父组件传递数据

   父组件被动的接收子组件的数据

3. 父组件可以将一个事件绑定在子组件的身上，这个事件的处理程序是父组件某一个方法，当子组件触发自己的这个被绑定的事件的时候，相当于触发了父组件的方法

   父组件被动的接收子组件的数据

1. 在组件间可以用过ref形成ref链，组件还拥有一个关系链（children,$root）,通过这两种链；理论来说，任意的两个组件都可以互相访问，互相进行通信

   任意组件通信，用的少...

1. event bus 事件总线 小天使 专注于非父子组件的通信，其实父子组件也可以使用，只是没有必要

   在B组件的某个钩子函数为event_bus绑定一个事件，事件的处理程序是B想做的事情

   在A组件的某一个操作里，触发event_bus绑定的事件

1. 大量组件间数据共享的时候 vuex

transition

Vue提供了transition组件来帮助我们实现过渡效果，依据就是在控制元素显示隐藏的时候为dom在指定的时刻添加上对应的类名

而我们只要在这些类名里写上对应的css样式

在进入/离开的过渡中，会有 6 个 class 切换(v代表的是transition的name属性的值)。

v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。

v-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (于此同时 v-enter 被删除)，在 transition/animation 完成之后移除。

v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。

v-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (于此同时 v-leave 被删除)，在 transition/animation 完成之后移除。

className

如果有多个元素需要用transition-group包裹，并且需要有key值做标记

animate.css:

引入animate.css之后，按照下面的写法：

<transition
    leave-active-class="animated fadeOut"
    enter-active-class="animated slideInLeft">
    <p v-if="isShow" class="box"></p>
</transition>