vue基础（八）

在 Vue 中，组件之间的传值方式主要包括以下几种情况：

1. 父组件向子组件传值（`props`）

父组件通过 props 传递数据给子组件：

<!-- Parent.vue -->
<template><ChildComponent :msg="message" />
</template><script>
import ChildComponent from './ChildComponent.vue';
export default {components: { ChildComponent },data() {return {message: 'Hello from Parent!'};}
};
</script>

<!-- ChildComponent.vue -->
<template><p>Received message: {{ msg }}</p>
</template><script>
export default {props: {msg: String}
};
</script>

2. 子组件向父组件传值（`$emit`）

子组件通过 this.$emit 触发事件，父组件监听事件并获取值：

<!-- Parent.vue -->
<template><ChildComponent @update-message="handleMessage" /><p>Message from Child: {{ receivedMessage }}</p>
</template><script>
import ChildComponent from './ChildComponent.vue';
export default {components: { ChildComponent },data() {return {receivedMessage: ''};},methods: {handleMessage(msg) {this.receivedMessage = msg;}}
};
</script>

<!-- ChildComponent.vue -->
<template><button @click="sendMessage">Send to Parent</button>
</template><script>
export default {methods: {sendMessage() {this.$emit('update-message', 'Hello from Child!');}}
};
</script>

3. 兄弟组件传值（`Event Bus` 或 `Pinia/Vuex`）

兄弟组件需要一个中间桥梁，比如 Event Bus（Vue 3 不推荐）或 Pinia（推荐）：

// eventBus.js (Vue 2 可用，Vue 3 推荐使用 Pinia)
import Vue from 'vue';
export const EventBus = new Vue();

在 BrotherA.vue 发送数据：

<template><button @click="sendMessage">Send to BrotherB</button>
</template><script>
import { EventBus } from './eventBus.js';
export default {methods: {sendMessage() {EventBus.$emit('message', 'Hello from BrotherA!');}}
};
</script>

在 BrotherB.vue 接收数据：

<template><p>{{ receivedMessage }}</p>
</template><script>
import { EventBus } from './eventBus.js';
export default {data() {return { receivedMessage: '' };},created() {EventBus.$on('message', msg => {this.receivedMessage = msg;});}
};
</script>

4. `ref` 方式（获取子组件实例）

父组件可以通过 ref 获取子组件实例并访问其方法或数据：

<!-- Parent.vue -->
<template><ChildComponent ref="childRef" /><button @click="callChildMethod">Call Child Method</button>
</template><script>
import ChildComponent from './ChildComponent.vue';
export default {components: { ChildComponent },methods: {callChildMethod() {this.$refs.childRef.childMethod();}}
};
</script>

<!-- ChildComponent.vue -->
<template><p>Child Component</p>
</template><script>
export default {methods: {childMethod() {console.log('Child method called!');}}
};
</script>

5. `provide` 和 `inject`（适用于祖孙组件）

适用于跨层级组件通信：

<!-- GrandParent.vue -->
<template><Parent />
</template><script>
import Parent from './Parent.vue';
export default {components: { Parent },provide() {return { sharedMessage: 'Hello from GrandParent!' };}
};
</script>

<!-- Parent.vue -->
<template><Child />
</template><script>
import Child from './Child.vue';
export default {components: { Child }
};
</script>

<!-- Child.vue -->
<template><p>{{ sharedMessage }}</p>
</template><script>
export default {inject: ['sharedMessage']
};
</script>

6. Vuex 或 Pinia（全局状态管理）

适用于复杂状态管理，如 Vuex（Vue 2）或 Pinia（Vue 3）：

// store.js (使用 Pinia)
import { defineStore } from 'pinia';export const useMainStore = defineStore('main', {state: () => ({message: 'Hello from Store'}),actions: {setMessage(newMsg) {this.message = newMsg;}}
});

在 ComponentA.vue 更新数据：

<template><button @click="updateMessage">Update Message</button>
</template><script>
import { useMainStore } from './store.js';
export default {setup() {const store = useMainStore();const updateMessage = () => store.setMessage('Updated Message!');return { updateMessage };}
};
</script>

在 ComponentB.vue 读取数据：

<template><p>{{ store.message }}</p>
</template><script>
import { useMainStore } from './store.js';
export default {setup() {const store = useMainStore();return { store };}
};
</script>