Vue3的7种种组件通信详情

下面将详细讲解Vue3的7种组件通信方式的完整攻略。

1. 父子组件通信

父子组件通信是指从父组件向子组件传递数据或者事件。在Vue3中我们可以使用props属性向子组件传递变量，或使用$emit方法接收子组件的事件通知。

以下是一个简单的示例：

<!-- 父组件 -->
<template>
  <div>
    <!-- 父组件传递变量给子组件 -->
    <ChildComponent :message="message"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  name: 'ParentComponent',
  components: { ChildComponent },
  data() {
    return {
      message: 'Hello from parent component'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: String
  },
  mounted() {
    console.log(this.message) // Hello from parent component
  }
}
</script>

2. 子父组件通信

子父组件通信是指从子组件向父组件传递数据或者事件。在Vue3中我们可以使用$emit方法向父组件传递一个自定义事件，并使用$on方法监听自定义事件。

以下是一个简单的示例：

<!-- 父组件 -->
<template>
  <div>
    <!-- 监听子组件自定义事件 -->
    <ChildComponent @child-message="handleChildMessage"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  name: 'ParentComponent',
  components: { ChildComponent },
  methods: {
    handleChildMessage(message) {
      console.log(message) // Hello from child component
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <button @click="sendMessage">Send message to parent</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  methods: {
    sendMessage() {
      this.$emit('child-message', 'Hello from child component')
    }
  }
}
</script>

3. 兄弟组件通信

兄弟组件通信是指在同一父组件中的两个子组件之间进行通信。在Vue3中我们可以使用一个空的Vue实例作为中央事件总线，以使两个组件之间可以通过该实例来共享数据。

以下是一个简单的示例：

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent1></ChildComponent1>
    <ChildComponent2></ChildComponent2>
  </div>
</template>

<script>
import Vue from 'vue'
import ChildComponent1 from './ChildComponent1.vue'
import ChildComponent2 from './ChildComponent2.vue'

const eventBus = new Vue()

export default {
  name: 'ParentComponent',
  components: { ChildComponent1, ChildComponent2 },
  provide() {
    return {
      eventBus
    }
  }
}
</script>

<!-- 兄弟组件1 -->
<template>
  <div>
    <button @click="sendMessage">Send message to sibling</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent1',
  inject: ['eventBus'],
  methods: {
    sendMessage() {
      this.eventBus.$emit('sibling-message', 'Hello from sibling 1')
    }
  }
}
</script>

<!-- 兄弟组件2 -->
<template>
  <div>{{ siblingMessage }}</div>
</template>

<script>
export default {
  name: 'ChildComponent2',
  inject: ['eventBus'],
  data() {
    return {
      siblingMessage: ''
    }
  },
  created() {
    this.eventBus.$on('sibling-message', message => {
      this.siblingMessage = message
    })
  }
}
</script>

4. 跨越多级父子组件通信

在多级父子组件的嵌套中，我们可以使用provide和inject来实现跨越多级父子组件的数据传递。可以在任何一个父组件中通过provide提供需要共享的数据，然后在任何一个子组件中使用inject来注入这些数据。

以下是一个简单的示例：

<!-- 祖父组件 -->
<template>
  <div>
    <ParentComponent></ParentComponent>
  </div>
</template>

<script>
import ParentComponent from './ParentComponent.vue'

const sharedData = {
  message: 'Hello from grandparent component',
  count: 0
}

export default {
  name: 'GrandparentComponent',
  components: { ParentComponent },
  provide() {
    return {
      sharedData
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  name: 'ParentComponent',
  components: { ChildComponent },
  inject: ['sharedData']
}
</script>

<!-- 子组件 -->
<template>
  <div>{{ sharedData.message }}</div>
</template>

<script>
export default {
  name: 'ChildComponent',
  inject: ['sharedData']
}
</script>

5. Vuex

Vuex是Vue的官方状态管理库，它可以全局管理应用程序中的状态，并且可以在任何组件中获取和改变状态。

以下是一个简单的示例：

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      message: 'Hello from Vuex store',
      count: 0
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    asyncIncrement({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

export default store

<!-- 组件中使用Vuex -->
<template>
  <div>
    <div>{{ $store.state.message }}</div>
    <div>{{ $store.getters.doubleCount }}</div>
    <button @click="$store.commit('increment')">Increment</button>
    <button @click="$store.dispatch('asyncIncrement')">Async Increment</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

6. $attrs和$listeners属性

在Vue3中，父组件可以向子组件传递任意的HTML属性或事件。可以在子组件中将这些属性和事件绑定到特定的元素或组件。

以下是一个简单的示例：

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent color="red" @click="handleClick"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  name: 'ParentComponent',
  components: { ChildComponent },
  methods: {
    handleClick() {
      console.log('clicked in parent component')
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div :style="{color: color}" @click="$emit('click')">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    color: String
  }
}
</script>

7. provide和inject

provide和inject是Vue3中新的特性，它能实现任意层级组件之间的数据传递。provide提供一个对象，所包含的属性在其所有子组件中都可用。而在其子组件中，我们可以使用inject来注入这些属性。

以下是一个简单的示例：

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

const sharedState = {
  message: 'Hello from parent component'
}

export default {
  name: 'ParentComponent',
  components: { ChildComponent },
  provide() {
    return {
      sharedState
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>{{ sharedState.message }}</div>
</template>

<script>
export default {
  name: 'ChildComponent',
  inject: ['sharedState']
}
</script>

以上是Vue3中的7种组件通信方式的详细攻略，其中包括了父子组件通信、子父组件通信、兄弟组件通信、跨越多级父子组件通信、Vuex、$attrs和$listeners属性，以及provide和inject。