March7th 
857 字
4 分钟
vue3中组件通信方法
Random Cover
在Vue 3中，组件之间的通信可以通过多种方式进行，以下是一些常用的方法：
1. Props（父传子）
通过props，父组件可以向子组件传递数据。
// 父组件<template> <ChildComponent :user="user" /></template><script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent, }, data() { return { user: 'John Doe', } }, }</script>2. Emit（子传父）
子组件可以通过$emit事件向父组件发送消息。
// 子组件<template> <button @click="sendToParent">Send to Parent</button></template><script> export default { methods: { sendToParent() { this.$emit('sendMessage', 'Hello from child!') }, }, }</script>// 父组件<template> <ChildComponent @sendMessage="handleMessage" /></template><script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent, }, methods: { handleMessage(message) { console.log(message) }, }, }</script>3. Provide / Inject
Vue 3 提供了provide和inject来跨多个组件层次传递数据，而不必一层层传递props。
// 祖先组件<script> import {provide} from 'vue' export default { setup() { const theme = 'dark' provide('theme', theme) }, }</script>// 后代组件<script> import {inject} from 'vue' export default { setup() { const theme = inject('theme') return {theme} }, }</script>4. Event Bus（简单事件总线）
虽然Vue 3不再推荐使用Event Bus，但仍然可以通过创建一个简单的Vue实例作为事件总线来使用。
import {createApp} from 'vue'const eventBus = createApp({})export default eventBus// 发送事件import eventBus from './event-bus.js'eventBus.emit('someEvent', 'Hello!')// 监听事件import eventBus from './event-bus.js'eventBus.on('someEvent', message => { console.log(message)})5. Vuex（状态管理）
对于大型应用，推荐使用Vuex来管理状态。
import {createStore} from 'vuex'export default createStore({ state: { count: 0, }, mutations: { increment(state) { state.count++ }, }, actions: { increment({commit}) { commit('increment') }, },})// 组件中使用<template> <button @click="increment">Increment</button></template><script> import {mapActions} from 'vuex' export default { methods: { ...mapActions(['increment']), }, }</script>6. Refs 和 children
通过ref属性可以获取子组件实例，从而调用子组件的方法或访问其数据。
// 父组件<template> <ChildComponent ref="child" /></template><script>import {ref} from 'vue'import ChildComponent from './ChildComponent.vue'export default { components: { ChildComponent, }, setup() { const child = ref(null) // 在适当的时机调用子组件的方法 child.value.someMethod() },}</script>7. attrs 和 listeners
使用v-bind="$attrs"和v-on="$listeners"可以自动将父组件的属性和事件传递给子组件。
// 父组件<template> <ChildComponent :title="title" @click="handleClick" /></template>// 子组件<template> <div v-bind="$attrs" v-on="$listeners"></div></template>8. Slots（插槽）
插槽是 Vue 中用于复合组件的一种内容分发机制，它允许你将组件的内容组合在一起。
默认插槽
<!-- 父组件 --><template> <ChildComponent> <p>This is some default content</p> </ChildComponent></template><!-- 子组件 --><template> <div> <slot>Default slot content if no content is provided</slot> </div></template>如果父组件没有提供任何内容，那么子组件中定义的默认内容将会被渲染。
具名插槽
具名插槽允许你将内容分发到子组件的不同位置。
<!-- 父组件 --><template> <ChildComponent> <template v-slot:header> <h1>This is a header</h1> </template> <template v-slot:default> <p>This is the main content</p> </template> <template v-slot:footer> <p>This is the footer</p> </template> </ChildComponent></template><!-- 子组件 --><template> <div> <header> <slot name="header"></slot> </header> <main> <slot></slot> <!-- 默认插槽 --> </main> <footer> <slot name="footer"></slot> </footer> </div></template>作用域插槽
作用域插槽允许你在父组件中访问子组件的数据。
<!-- 父组件 --><template> <ChildComponent> <template v-slot:default="slotProps"> <p>{{ slotProps.user.name }} - {{ slotProps.user.age }}</p> </template> </ChildComponent></template><!-- 子组件 --><template> <div> <slot :user="user"></slot> </div></template><script> export default { data() { return { user: { name: 'John Doe', age: 30, }, } }, }</script>在上述例子中，ChildComponent 通过 slot 属性将 user 对象传递给了插槽，而父组件通过 v-slot:default="slotProps" 接收这个对象，并在插槽内容中使用它。
以上就是 Vue 3 中组件之间通信的各种方法，每种方法适用于不同的场景，你可以根据具体需求选择合适的方法。
最后更新于 2024-07-16，距今已过 481 天
部分内容可能已过时