Vue 待办应用中组件通信的核心方法

Vue 的组件系统提供了多种通信方式，适用于不同场景的父子组件、兄弟组件或跨级组件交互。以下是基于 CodeBuddy Code CLI 构建待办应用的实用方案：

父子组件通信：Props 与 Events

父组件通过 props 向下传递数据，子组件通过 $emit 触发事件向上传递信息。这是最基础的 Vue 通信模式。

<!-- 父组件 -->
<template>
  <TaskList :tasks="taskItems" @task-complete="handleComplete" />
</template>

<script>
export default {
  data() {
    return { taskItems: ['Buy milk', 'Write docs'] }
  },
  methods: {
    handleComplete(index) {
      this.taskItems.splice(index, 1)
    }
  }
}
</script>

<!-- 子组件 TaskList.vue -->
<template>
  <ul>
    <li v-for="(task, index) in tasks" @click="$emit('task-complete', index)">
      {{ task }}
    </li>
  </ul>
</template>

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

跨组件通信：Event Bus

对于非父子关系的组件，可以创建中央事件总线。这种方法适合中小型应用。

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

// 组件A发送事件
EventBus.$emit('task-added', newTask)

// 组件B接收事件
EventBus.$on('task-added', (task) => {
  console.log('New task:', task)
})

状态管理：Vuex 集成

对于复杂状态管理，Vuex 提供集中式存储。CodeBuddy CLI 可快速集成 Vuex。

// store/modules/tasks.js
export default {
  state: {
    list: []
  },
  mutations: {
    ADD_TASK(state, task) {
      state.list.push(task)
    }
  },
  actions: {
    addTask({ commit }, task) {
      commit('ADD_TASK', task)
    }
  }
}

<!-- 组件中使用 -->
<template>
  <button @click="addNewTask">Add Task</button>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['addTask']),
    addNewTask() {
      this.addTask('New task item')
    }
  }
}
</script>

依赖注入：Provide/Inject

对于深层嵌套组件，使用 provide/inject 避免 prop 逐层传递。

// 祖先组件
export default {
  provide() {
    return {
      todoApp: this
    }
  },
  data() {
    return { appName: 'Todo App' }
  }
}

// 后代组件
export default {
  inject: ['todoApp'],
  created() {
    console.log(this.todoApp.appName) // "Todo App"
  }
}

组件引用：ref 与 $refs

直接访问子组件实例，适用于需要调用子组件方法的场景。

<template>
  <TaskEditor ref="editor" />
  <button @click="saveTask">Save</button>
</template>

<script>
export default {
  methods: {
    saveTask() {
      this.$refs.editor.submit()
    }
  }
}
</script>

本地存储通信

组件间通过 localStorage/sessionStorage 共享数据，适合需要持久化的场景。

// 组件A存储数据
localStorage.setItem('todos', JSON.stringify(todoList))

// 组件B读取数据
const storedTodos = JSON.parse(localStorage.getItem('todos'))

每种通信方式都有其适用场景，实际开发中常常组合使用。CodeBuddy Code CLI 提供的模板通常已预设常用通信模式，开发者可根据具体需求选择最合适的方案。