Vue 中利用 Props 实现组件通信

2023-10-19 13:56:11

简介

组件通信是 Vue.js 中实现不同组件之间数据和事件传递的重要机制。通过组件通信，您可以轻松地构建出复杂的、可重用的 UI 界面，提高代码的可维护性和可扩展性。

Props 基本原理

Props 是 Vue.js 中用于组件通信的一种特殊属性。它允许父组件向子组件传递数据，子组件可以通过 Props 接收并使用这些数据。

在父组件中，您可以通过以下方式为子组件传递 Props：

<template>
  <ChildComponent :message="message" />
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello from parent!'
      }
    }
  }
</script>

在子组件中，您可以通过以下方式接收父组件传递的 Props：

<template>
  <div>{{ message }}</div>
</template>

<script>
  export default {
    props: ['message']
  }
</script>

通过这种方式，您就可以在父组件和子组件之间实现数据传递。

Props 应用场景

Props 可以用于各种场景，例如：

传递数据到子组件： 您可以使用 Props 将数据从父组件传递到子组件，以便子组件能够使用这些数据。例如，您可以将一个用户对象传递到一个子组件，以便子组件能够显示该用户的信息。
在子组件中修改数据： 您可以通过 Props 将数据从父组件传递到子组件，然后在子组件中修改这些数据。例如，您可以将一个数组传递到一个子组件，然后在子组件中对该数组进行排序或过滤。
在父组件和子组件之间传递事件： 您可以使用 Props 在父组件和子组件之间传递事件。例如，您可以创建一个子组件，当用户单击该子组件时，该子组件会向父组件触发一个事件。

TodoList 案例

为了更好地理解 Props 的用法，我们来看一个 TodoList 的案例。在这个案例中，我们将创建一个父组件 App 和一个子组件 TodoList。

<!-- App.vue -->
<template>
  <div>
    <h1>Todo List</h1>
    <TodoList :todos="todos" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        todos: [
          { id: 1, text: 'Learn Vue.js' },
          { id: 2, text: 'Build a Todo app' },
          { id: 3, text: 'Deploy the app to production' }
        ]
      }
    }
  }
</script>

<!-- TodoList.vue -->
<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
    </li>
  </ul>
</template>

<script>
  export default {
    props: ['todos']
  }
</script>