Vue父子组件通信：数据共享与修改实践

"Vue.js 实现父子组件间的数据共享与修改" 在 Vue.js 开发中，经常需要在父组件和子组件之间进行数据传递和交互。本示例以一个具体的项目场景来阐述如何实现这一功能。在这个场景中，父组件包含一个左侧导航栏和一个中间的富文本编辑器，当点击导航栏时，中间的编辑器会根据选择的内容进行更换。 首先，我们需要在父组件（例如 `index.vue`）中创建一个变量 `index`，用于存储当前选中的导航项。导航栏的每个选项也有对应的 `index` 值。通过给导航菜单绑定 `@select="handleSelect"` 事件，这里的 `@` 是 `v-on` 的简写，表示监听 click 事件并调用 `handleSelect` 函数。 ```html <Aside @select="handleSelect"></Aside> ``` 在 `handleSelect` 函数中，我们可以接收参数并将其传递给父组件： ```javascript handleSelect(key, keyPath) { console.log(key, keyPath); this.changeIndex(keyPath[1]); } changeIndex(key) { this.$emit('IndexChanged', key); } ``` 这里使用 `$emit` 触发自定义事件 `IndexChanged`，并将 `key` 作为参数传递。父组件通过监听 `@IndexChanged` 事件来接收子组件传递的值： ```html <Aside v-on:IndexChanged="change($event)"></Aside> ``` 在 `change` 函数中，我们可以处理接收到的 `key`，并根据它来更新 `index`，从而达到切换显示内容的目的。 为了更清晰地理解这个过程，我们可以创建一个简单的父子组件示例。假设我们有 `Test.vue` 作为父组件，`Test2.vue` 作为子组件。在 `Test.vue` 中，我们将导入 `Test2.vue` 并通过路由进行配置，以展示如何传递数据。 ```html <template> <div id="app"> <Test2 :data="parentData" @childEvent="handleChildEvent"/> </div> </template> <script> import Test2 from './Test2.vue'; export default { name: 'Test', data() { return { parentData: 'Hello from Parent', }; }, methods: { handleChildEvent(newData) { console.log('Received data from child:', newData); // 更新 parentData this.parentData = newData; }, }, }; </script> ``` 在 `Test2.vue` 子组件中，我们可以接收来自父组件的数据，并通过 `$emit` 发送事件回传数据： ```html <template> <div> <h3>Child Component</h3> <p>Data from Parent: {{ parentData }}</p> <button @click="sendToParent">Send Data to Parent</button> </div> </template> <script> export default { name: 'Test2', props: { data: String, }, methods: { sendToParent() { const newData = 'New Data from Child'; this.$emit('childEvent', newData); }, }, }; </script> ``` 这个例子展示了如何通过属性绑定 (`props`) 将数据从父组件传递给子组件，以及通过事件监听 (`$emit`) 使子组件能够修改父组件的数据。在实际项目中，还可以利用 Vuex 状态管理库或 Vue 的自定义事件总线（Event Bus）来实现更复杂的组件间通信。