Vue3中的自定义事件和状态提升案例

JJCTO袁龙

于 2024-08-31 13:59:47 发布

阅读量723

点赞数 10

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/yuanlong12178/article/details/141751823

版权

Vue 专栏收录该内容

457 篇文章 5 订阅

订阅专栏

Vue3中的自定义事件和状态提升案例

在现代Web开发中，Vue.js作为一个轻量级且灵活的前端框架，越来越受到开发者的青睐。而Vue3引入的组合式API（setup语法糖）更是让状态管理和事件处理变得更加优雅。在这篇博客中，我们将探讨如何在Vue3中利用自定义事件和状态提升，实现组件间的有效通信。

什么是自定义事件？

自定义事件是Vue组件与其他组件之间传递信息的一种方式。当子组件需要将一些信息传递给父组件时，可以通过自定义事件的形式实现。Vue允许我们使用 $emit 方法来触发自定义事件，从而实现数据的流动，确保组件之间的解耦。

状态提升（State Lifting）

状态提升是将状态从子组件移动到父组件的过程，以便多个子组件能够共享同一个状态。通过状态提升，我们可以将常见的状态放在共同的父组件中，这样可以让各个子组件都能访问和修改这个状态。

实现案例

我们将实现一个简单的计数器应用，包含一个父组件和两个子组件：一个子组件负责显示当前的计数值，另一个子组件负责增加计数。

1. 创建父组件

首先，我们需要创建一个父组件 CounterApp.vue。该组件将管理计数的状态，并将其传递给子组件。

<template>
  <div>
    <h1>计数器应用</h1>
    <CounterDisplay :count="count" />
    <CounterButton @increment="incrementCount" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import CounterDisplay from './CounterDisplay.vue';
import CounterButton from './CounterButton.vue';

const count = ref(0);

const incrementCount () => {
  count.value++;
};
</script>

<style scoped>
h1 {
  text-align: center;
}
</style>

2. 创建子组件 `CounterDisplay.vue`

该子组件接收父组件传来的 count 属性，并显示当前计数值。

<template>
  <div>
    <h2>当前计数: {{ count }}</h2>
 div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  count: {
    type: Number,
    required: true,
  },
script>

<style scoped>
h2 {
  text-align: center;
  color: #4caf50;
}
</style>

3. 创建子组件 `CounterButton.vue`

该子组件负责增加计数，通过自定义事件将请求传递给父组件。

<template>
  <div>
    <button @click="handleClick">增加计数</button>
  </div>
</template>

<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits();

const handleClick = () => {
  emit('increment');
};
</script>

<style scoped>
button {
  padding: 10px 20px;
  font-size: 16px;
}
</style>