Vue学习笔记（8）

8.1 组件自定义事件

在 Vue 中，组件可以通过自定义事件来实现组件之间的通信。自定义事件可以让一个组件触发一个事件，并向其他组件传递数据。以下是自定义事件的实现步骤：

1. 在组件中定义一个事件名：可以在组件中使用 $emit 方法来触发一个自定义事件，并传递数据。例如：

// 在组件中定义一个事件名
<button @click="$emit('my-event', data)">Click me</button>

上面的代码定义了一个名为my-event的自定义事件，并将data数据传递给其他组件。

2. 在父组件中监听该事件：可以在父组件中使用v-on或@来监听一个自定义事件。例如：

// 在父组件中监听自定义事件
<my-component @my-event="handleEvent"></my-component>

上面的代码监听了my-event事件，并将事件处理函数handleEvent与该事件绑定。

3. 在父组件中实现事件处理函数：当监听到自定义事件时，父组件会自动调用绑定的事件处理函数，并传递事件数据。例如：

// 在父组件中实现事件处理函数
methods: {handleEvent(data) {console.log(data)}
}

上面的代码实现了handleEvent事件处理函数，并在控制台中输出事件数据。

通过以上步骤，就可以在Vue中实现组件之间的自定义事件。自定义事件可以让组件之间的通信更加灵活，方便数据传递和状态管理。

8.2 全局事件总线

在Vue中，可以使用全局事件总线实现组件之间的通信。全局事件总线是一个 Vue 实例，它充当一个中央事件处理器，可以让不同组件之间传递数据和通知。

以下是在Vue中实现全局事件总线的步骤：

1. 创建全局事件总线实例：在Vue实例化之前，可以先创建一个全局事件总线实例，并将其挂载到Vue的原型上。例如：

import Vue from 'vue'// 创建全局事件总线实例
const eventBus = new Vue()// 将事件总线实例挂载到 Vue 的原型上
Vue.prototype.$eventBus = eventBus

2. 在组件中使用事件总线：可以在组件中使用$emit方法来触发事件，并在事件总线上监听该事件。例如：

// 在组件中使用事件总线
this.$eventBus.$emit('my-event', data)

上面的代码触发了一个名为my-event的事件，并将data数据传递给事件总线。

3. 在其他组件中监听事件：可以在其他组件中使用$on方法来监听事件总线上的事件。例如：

// 在其他组件中监听事件总线
this.$eventBus.$on('my-event', handleEvent)

上面的代码监听了my-event事件，并将事件处理函数handleEvent与该事件绑定。

4. 在事件处理函数中处理数据：当事件触发时，事件总线会自动调用事件处理函数，并传递事件数据。例如：

// 在事件处理函数中处理数据
handleEvent(data) {console.log(data)
}

上面的代码实现了handleEvent事件处理函数，并在控制台中输出事件数据。

通过以上步骤，就可以在Vue中实现全局事件总线，并实现组件之间的通信。全局事件总线可以让组件之间的通信更加灵活，方便数据传递和状态管理。需要注意的是，使用全局事件总线时要注意避免事件命名冲突和事件泄漏。

8.3 消息订阅与发布

在Vue中，可以使用消息订阅与发布模式来实现组件之间的通信。这种模式是一种松耦合的通信方式，可以让组件之间不直接依赖彼此，通过中间件来进行通信。

以下是在Vue中实现消息订阅与发布的步骤：

1. 创建消息中心：可以使用一个空的Vue实例作为消息中心，也可以使用第三方库如mitt来实现。例如：

import Vue from 'vue'
// 创建消息中心实例
export const eventBus = new Vue()

2. 在组件中订阅消息：可以使用 eventBus.$on 方法来订阅消息，当消息被发布时，事件中心会自动调用相应的回调函数。例如：

// 在组件中订阅消息
eventBus.$on('my-event', handleEvent)

3. 在组件中发布消息：可以使用eventBus.$emit方法来发布消息，将消息发送给订阅者。例如：

// 在组件中发布消息
eventBus.$emit('my-event', data)

上面的代码发布了一个名为my-event的消息，并将data数据传递给订阅者。

4. 在事件处理函数中处理数据：当消息被发布时，事件中心会自动调用订阅该消息的回调函数，并传递消息数据。例如：

// 在事件处理函数中处理数据
function handleEvent(data) {console.log(data)
}

上面的代码实现了handleEvent事件处理函数，并在控制台中输出消息数据。

通过以上步骤，就可以在Vue中实现消息订阅与发布，并实现组件之间的通信。消息订阅与发布模式可以让组件之间的通信更加灵活，方便数据传递和状态管理。需要注意的是，使用消息订阅与发布时要注意避免消息命名冲突和消息泄漏。

8.4 过渡与动画

在Vue中，可以使用过渡和动画来实现页面元素的动态效果，如淡入淡出、滑动、旋转等。过渡是指在元素插入、更新或删除时添加动画效果，而动画是指在元素不断变化时持续添加动画效果。

以下是在Vue中实现过渡和动画的步骤：

1. 创建过渡或动画组件：可以使用<transition>或<transition-group>组件来创建过渡效果，使用<transition>或<animate>标签来创建动画效果。例如：

<transition name="fade"><!-- 插入或更新元素的内容 -->
</transition>

上面的代码使用了名为fade的过渡效果来在元素插入或更新时添加动画效果。

<animate attributeName="opacity" from="0" to="1" dur="1s" repeatCount="indefinite"/>

上面的代码使用了一个简单的动画效果，将元素的不透明度从0到1变化，并在1秒内重复该变化。

2. 定义过渡或动画的CSS样式：可以使用CSS样式来定义过渡或动画效果的具体样式。例如：

/* 定义 fade 过渡效果的 CSS 样式 */
.fade-enter-active,
.fade-leave-active {transition: opacity .5s;
}
.fade-enter,
.fade-leave-to {opacity: 0;
}

上面的代码定义了fade过渡效果的CSS样式，包括元素插入和更新时的过渡效果（.fade-enter-active），元素删除时的过渡效果（.fade-leave-active），元素插入和更新时的开始状态（.fade-enter）和元素删除时的结束状态（.fade-leave-to）。

/* 定义动画效果的 CSS 样式 */
@keyframes slidein {from {transform: translateX(-100%);}to {transform: translateX(0);}
}

上面的代码定义了一个名为slidein的动画效果，将元素从左侧滑入。

3. 应用过渡或动画：要在Vue中应用过渡或动画效果，需要在组件中使用<transition>或<transition-group>组件来包裹需要添加动画的元素，并通过name或type属性来指定过渡或动画的名称。例如：

<template><div><transition name="fade"><p v-if="show">Hello, Vue!</p></transition></div>
</template>

上面的代码使用了名为fade的过渡效果来实现元素的淡入淡出效果<transition>组件的name属性指定了过渡的名称，而包裹在其中的<p>元素则使用v-if指令来控制其显示与隐藏。

如果要应用动画效果，则可以使用<animate>标签，将需要添加动画的元素的动画效果直接定义在标签内，如下所示：

<template><div><h1>Vue Animation Example</h1><animate attributeName="opacity" from="0" to="1" dur="1s" repeatCount="indefinite"><circle cx="50" cy="50" r="40" fill="blue" /></animate></div>
</template>

上面的代码定义了一个简单的动画效果，将 <circle> 元素的不透明度从 0 到 1 变化，并在 1 秒内重复该变化。

4. 定义过渡或动画的 CSS 样式

要实现过渡或动画效果，需要定义相应的 CSS 样式，以指定元素在过渡或动画中的状态。对于过渡效果，通常需要定义以下四个样式类：

• v-enter: 元素进入过渡的起始状态。
• v-enter-active: 元素进入过渡的结束状态。
• v-leave: 元素离开过渡的起始状态。
• v-leave-active: 元素离开过渡的结束状态。

例如，下面的 CSS 样式定义了一个渐变的过渡效果：

.fade-enter-from, .fade-leave-to {opacity: 0;
}
.fade-enter-active, .fade-leave-active {transition: opacity 0.5s;
}
.fade-enter-to, .fade-leave-from {opacity: 1;
}

对于动画效果，需要定义动画的关键帧和动画属性：

@keyframes slidein {from {margin-left: 100%;width: 300%;}to {margin-left: 0%;width: 100%;}
}
.circle {animation: slidein 1s infinite;
}

上面的代码定义了一个滑动动画效果，通过@keyframes定义了动画的关键帧，通过animation属性将其绑定到了.circle元素上。

5. 绑定CSS样式：在Vue中，我们可以通过以下方式将定义好的CSS样式与组件绑定起来：

   • 对于过渡效果，在<transition>或<transition-group>组件上使用name属性来指定过渡效果的名称，并使用CSS类名来绑定不同阶段的样式，例如：

   <transition name="fade"><p v-if="show">Hello, Vue!</p>
   </transition>
   

   • 对于动画效果，可以在需要添加动画的元素上使用class或:class属性来绑定CSS类名，例如：

   <circle class="circle" cx="50" cy="50" r="40" fill="blue" />
   

   上面的代码将circle类名绑定到了<circle>元素上，从而实现了滑动动画效果。

6. 结束过渡或动画：在过渡或动画结束时，通常需要执行一些操作，例如将过渡或动画元素从DOM中移除或者将其样式重置为默认值等。Vue提供了多种方式来监听过渡或动画结束事件，包括：

• 在<transition>或<transition-group>组件上使用@enter,@enter-to,@leave和@leave-to等事件来监听过渡的不同阶段，例如：

<transition @enter="onEnter" @leave="onLeave"><p v-if="show">Hello, Vue!</p>
</transition>

在上面的代码中，@enter和@leave分别表示过渡进入和离开的阶段，我们可以在组件中定义对应的方法onEnter和onLeave来处理相应的操作。

• 在动画元素上使用animationend或transitionend事件来监听动画或过渡结束事件，例如：

<circle class="circle" cx="50" cy="50" r="40" fill="blue" @animationend="onAnimationEnd" />

在上面的代码中，@animationend事件表示动画结束事件，我们可以在组件中定义onAnimationEnd方法来处理相应的操作。

在处理过渡或动画结束事件时，我们通常需要使用this关键字来访问组件实例，例如：

methods: {onEnter() {console.log('enter')console.log(this) // 访问组件实例},onLeave() {console.log('leave')console.log(this) // 访问组件实例},onAnimationEnd() {console.log('animation end')console.log(this) // 访问组件实例}
}

通过以上的方法，我们就可以很方便地实现过渡和动画的效果，并在相应的事件中处理结束时的操作。