在
Vue 2 中，爷孙
组件（即祖父
组件和孙子
组件）之间的
传值可以通过以下几种方式实现：
### 1. **使用 `props` 和 `$emit` 逐层
传递**
这是最直接的方式，但需要中间
组件（父
组件）进行中转。
**祖父
组件**：
```
vue
<template>
<parent-component :value="grandfatherValue" @update="handleUpdate" />
</template>
<script>
export default {
data() {
return {
grandfatherValue: '初始
值'
}
},
methods: {
handleUpdate(newValue) {
this.grandfatherValue = newValue;
}
}
}
</script>
```
**父
组件**：
```
vue
<template>
<child-component :value="value" @update="$emit('update', $event)" />
</template>
<script>
export default {
props: ['value']
}
</script>
```
**孙子
组件**：
```
vue
<template>
<div>
<p>{{ value }}</p>
<button @click="$emit('update', '新
值')">更新
值</button>
</div>
</template>
<script>
export default {
props: ['value']
}
</script>
```
###
2. **使用 `provide` 和 `
inject`**
Vue 2.
2.0+ 提供了 `provide` 和 `
inject` 选项，允许祖先
组件向所有子孙
组件注入依赖，无需逐层
传递。
**祖父
组件**：
```
vue
<template>
<parent-component />
</template>
<script>
export default {
provide() {
return {
sharedValue: this.grandfatherValue,
updateValue: this.updateValue
}
},
data() {
return {
grandfatherValue: '初始
值'
}
},
methods: {
updateValue(newValue) {
this.grandfatherValue = newValue;
}
}
}
</script>
```
**孙子
组件**：
```
vue
<template>
<div>
<p>{{ sharedValue }}</p>
<button @click="updateValue('新
值')">更新
值</button>
</div>
</template>
<script>
export default {
inject: ['sharedValue', 'updateValue']
}
</script>
```
### 3. **使用事件总线（Event Bus）**
通过创建一个中央事件总线，
组件之间可以通过它来通信。
**创建事件总线**（通常在单独的文件中）：
```javascript
// event-bus.js
import
Vue from '
vue';
export const EventBus = new
Vue();
```
**祖父
组件**：
```
vue
<template>
<parent-component />
</template>
<script>
import { EventBus } from './event-bus.js';
export default {
created() {
EventBus.$on('updateValue', (newValue) => {
console.log('收到孙子
组件的
值:', newValue);
});
}
}
</script>
```
**孙子
组件**：
```
vue
<template>
<button @click="sendValue">发送
值到祖父
组件</button>
</template>
<script>
import { EventBus } from './event-bus.js';
export default {
methods: {
sendValue() {
EventBus.$emit('updateValue', '新
值');
}
}
}
</script>
```
### 4. **使用
Vuex**
如果项目较大，可以使用
Vuex 进行状态管理。
**store.js**：
```javascript
import
Vue from '
vue';
import
Vuex from '
vuex';
Vue.use(
Vuex);
export default new
Vuex.Store({
state: {
sharedValue: '初始
值'
},
mutations: {
updateValue(state, newValue) {
state.sharedValue = newValue;
}
}
});
```
**祖父
组件**：
```
vue
<template>
<parent-component />
</template>
<script>
export default {
computed: {
sharedValue() {
return this.$store.state.sharedValue;
}
}
}
</script>
```
**孙子
组件**：
```
vue
<template>
<div>
<p>{{ sharedValue }}</p>
<button @click="updateValue('新
值')">更新
值</button>
</div>
</template>
<script>
export default {
computed: {
sharedValue() {
return this.$store.state.sharedValue;
}
},
methods: {
updateValue(newValue) {
this.$store.commit('updateValue', newValue);
}
}
}
</script>
```
### 总结
- **逐层
传递**：适合简单场景，但代码冗余。
- **`provide` 和 `
inject`**：适合深层嵌套
组件，但耦合性较高。
- **事件总线**：适合小型项目，但可能难以维护。
- **
Vuex**：适合大型项目，但引入了额外复杂度。
根据项目需求选择合适的方式。
扫一扫
437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
