【Vue】day04-组件通信

**Vue 组件通信**

在 Vue 中，组件之间可以通过各种方式进行通信。这种通信是指一个组件向另一个组件传递数据或事件，这样就可以实现组件之间的协作和交互。

###1. **props**

最简单也是最常用的方法就是使用 `props` 来传递数据。`props` 是父组件向子组件传递数据的一种方式。

**例子：**

html<!-- 父组件 -->
<template>
 <div>
 <child :name="name" @click="handleClick"></child>
 </div>
</template>

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

export default {
 components: { Child },
 data() {
 return {
 name: 'Vue'
 }
 },
 methods: {
 handleClick() {
 console.log('点击了')
 }
 }
}
</script>

html<!-- 子组件 -->
<template>
 <div>
 {{ name }}
 <button @click="handleClick">点击我</button>
 </div>
</template>

<script>
export default {
 props: ['name'],
 methods: {
 handleClick() {
 this.$emit('click')
 }
 }
}
</script>

在上面的例子中，我们定义了一个 `Child` 组件，它接受一个 `name` 的 `props`，并且有一个点击事件。父组件向子组件传递了 `name` 的值，并且监听了子组件的点击事件。

###2. **$emit**

除了使用 `props` 之外，我们还可以通过 `$emit` 来触发子组件的事件。

**例子：**

html<!-- 父组件 -->
<template>
 <div>
 <child @click="handleClick"></child>
 </div>
</template>

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

export default {
 components: { Child },
 methods: {
 handleClick() {
 console.log('点击了')
 }
 }
}
</script>

html<!-- 子组件 -->
<template>
 <div>
 <button @click="handleClick">点击我</button>
 </div>
</template>

<script>
export default {
 methods: {
 handleClick() {
 this.$emit('click')
 }
 }
}
</script>

在上面的例子中，我们定义了一个 `Child` 组件，它有一个点击事件。父组件监听了子组件的点击事件。

###3. **$on**

除了使用 `$emit` 之外，我们还可以通过 `$on` 来监听子组件的事件。

**例子：**

html<!-- 父组件 -->
<template>
 <div>
 <child @click="handleClick"></child>
 </div>
</template>

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

export default {
 components: { Child },
 methods: {
 handleClick() {
 console.log('点击了')
 }
 }
}
</script>

html<!-- 子组件 -->
<template>
 <div>
 <button @click="handleClick">点击我</button>
 </div>
</template>

<script>
export default {
 methods: {
 handleClick() {
 this.$emit('click')
 }
 },
 mounted() {
 this.$on('click', () => {
 console.log('监听到了')
 })
 }
}
</script>

在上面的例子中，我们定义了一个 `Child` 组件，它有一个点击事件。父组件监听了子组件的点击事件。

###4. **$parent**

除了使用 `$emit` 和 `$on` 之外，我们还可以通过 `$parent` 来访问父组件。

**例子：**

html<!-- 父组件 -->
<template>
 <div>
 <child @click="handleClick"></child>
 </div>
</template>

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

export default {
 components: { Child },
 methods: {
 handleClick() {
 console.log('点击了')
 }
 }
}
</script>

html<!-- 子组件 -->
<template>
 <div>
 <button @click="handleClick">点击我</button>
 </div>
</template>

<script>
export default {
 methods: {
 handleClick() {
 this.$parent.handleClick()
 }
 }
}
</script>

在上面的例子中，我们定义了一个 `Child` 组件，它有一个点击事件。父组件监听了子组件的点击事件。

###5. **$root**

除了使用 `$emit` 和 `$on` 之外，我们还可以通过 `$root` 来访问根组件。

**例子：**

html<!-- 父组件 -->
<template>
 <div>
 <child @click="handleClick"></child>
 </div>
</template>

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

export default {
 components: { Child },
 methods: {
 handleClick() {
 console.log('点击了')
 }
 }
}
</script>

html<!-- 子组件 -->
<template>
 <div>
 <button @click="handleClick">点击我</button>
 </div>
</template>

<script>
export default {
 methods: {
 handleClick() {
 this.$root.handleClick()
 }
 }
}
</script>

在上面的例子中，我们定义了一个 `Child` 组件，它有一个点击事件。父组件监听了子组件的点击事件。

###6. **provide 和 inject**

除了使用 `$emit` 和 `$on` 之外，我们还可以通过 `provide` 和 `inject` 来传递数据和事件。

**例子：**

html<!-- 父组件 -->
<template>
 <div>
 <child :name="name" @click="handleClick"></child>
 </div>
</template>

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

export default {
 components: { Child },
 data() {
 return {
 name: 'Vue'
 }
 },
 methods: {
 handleClick() {
 console.log('点击了')
 }
 }
}
</script>

html<!-- 子组件 -->
<template>
 <div>
 {{ name }}
 <button @click="handleClick">点击我</button>
 </div>
</template>

<script>
export default {
 inject: ['name'],
 methods: {
 handleClick() {
 console.log('点击了')
 }
 }
}
</script>

在上面的例子中，我们定义了一个 `Child` 组件，它接受一个 `name` 的 `inject`，并且有一个点击事件。父组件向子组件传递了 `name` 的值，并且监听了子组件的点击事件。

###7. **Vuex**

除了使用 `$emit` 和 `$on` 之外，我们还可以通过 Vuex 来管理全局状态和事件。

**例子：**

html<!-- 父组件 -->
<template>
 <div>
 <child :name="name" @click="handleClick"></child>
 </div>
</template>

<script>
import Child from './Child.vue'
import { mapState, mapMutations } from 'vuex'

export default {
 components: { Child },
 computed: {
 ...mapState(['name'])
 },
 methods: {
 handleClick() {
 console.log('点击了')
 }
 }
}
</script>

html<!-- 子组件 -->
<template>
 <div>
 {{ name }}
 <button @click="handleClick">点击我</button>
 </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
 computed: {
 ...mapState(['name'])
 },
 methods: {
 handleClick() {
 console.log('点击了')
 }
 }
}
</script>

在上面的例子中，我们定义了一个 `Child` 组件，它接受一个 `name` 的 `mapState`，并且有一个点击事件。父组件向子组件传递了 `name` 的值，并且监听了子组件的点击事件。

###8. **EventBus**

除了使用 `$emit` 和 `$on` 之外，我们还可以通过 EventBus 来管理全局事件。

**例子：**

html<!-- 父组件 -->
<template>
 <div>
 <child @click="handleClick"></child>
 </div>
</template>

<script>
import Child from './Child.vue'
import EventBus from 'event-bus'

export default {
 components: { Child },
 methods: {
 handleClick() {
 console.log('点击了')
 }
 }
}
</script>

html<!-- 子组件 -->
<template>
 <div>
 <button @click="handleClick">点击我</button>
 </div>
</template>

<script>
import EventBus from 'event-bus'

export default {
 methods: {
 handleClick() {
 EventBus.$emit('click')
 }
 }
}
</script>

在上面的例子中，我们定义了一个 `Child` 组件，它有一个点击事件。