Vue组件间通信探索：从案例重温基础机制

前端

2023-10-28 17:08:13

Vue组件间通信复习

父子组件通信：

在Vue中，父子组件通信是通过props 和**$emit** 来实现的。

props 允许父组件向子组件传递数据，子组件可以接收这些数据并使用它们。
$emit 允许子组件向父组件发送事件，父组件可以监听这些事件并做出相应反应。

中央事件总线：

除了父子组件通信，Vue还提供了中央事件总线功能，它允许组件之间进行广播和监听事件，而不需要它们之间存在直接的父子关系。

要使用中央事件总线，可以使用**on** 和**emit** 方法。
on** 方法可以监听事件，而**emit 方法可以发送事件。

Vuex：

Vuex是一个状态管理工具，它允许组件之间共享状态。

Vuex状态存储在一个集中式存储中，组件可以通过mapState 和mapMutations 方法访问和修改状态。
Vuex还可以通过actions 来处理复杂的业务逻辑。

案例：任务管理应用程序

为了更好地理解Vue组件间通信，让我们考虑一个简单的任务管理应用程序。

这个应用程序由一个父组件（TaskManager)和一个子组件（Task)组成。
TaskManager组件负责显示所有任务列表，而Task组件负责显示单个任务。

父子组件通信：

TaskManager组件使用props 向Task组件传递任务数据。

<template>
  <div>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        <Task :task="task" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: [
        { id: 1, title: 'Task 1', description: 'Description for Task 1' },
        { id: 2, title: 'Task 2', description: 'Description for Task 2' }
      ]
    }
  }
}
</script>

Task组件使用props 接收任务数据，并在模板中显示它。

<template>
  <div>
    <h2>{{ task.title }}</h2>
    <p>{{ task.description }}</p>
  </div>
</template>

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

中央事件总线：

Task组件使用**$emit** 方法向父组件发送一个事件，当任务完成时。

<template>
  <div>
    <button @click="markTaskAsComplete">Mark as Complete</button>
  </div>
</template>

<script>
export default {
  props: ['task'],
  methods: {
    markTaskAsComplete() {
      this.$emit('task-completed', this.task)
    }
  }
}
</script>

TaskManager组件使用**$on** 方法监听这个事件，并在任务完成时更新任务列表。

<template>
  <div>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        <Task :task="task" @task-completed="taskCompleted" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: [
        { id: 1, title: 'Task 1', description: 'Description for Task 1', completed: false },
        { id: 2, title: 'Task 2', description: 'Description for Task 2', completed: false }
      ]
    }
  },
  methods: {
    taskCompleted(task) {
      task.completed = true
    }
  }
}
</script>

Vuex：

在这个应用程序中，可以使用Vuex来存储和管理任务列表。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    tasks: [
      { id: 1, title: 'Task 1', description: 'Description for Task 1', completed: false },
      { id: 2, title: 'Task 2', description: 'Description for Task 2', completed: false }
    ]
  },
  mutations: {
    markTaskAsComplete(state, task) {
      task.completed = true
    }
  }
})

export default store

然后，组件可以使用mapState 和mapMutations 方法来访问和修改Vuex状态。

// TaskManager.vue
<template>
  <div>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        <Task :task="task" @task-completed="markTaskAsComplete" />
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['tasks'])
  },
  methods: {
    ...mapMutations(['markTaskAsComplete']),
    markTaskAsComplete(task) {
      this.markTaskAsComplete({ task })
    }
  }
}
</script>