Vue如何实现父子组件之间的通信功能

Vue是一个前端开发框架，提供了一些简单易用的api来实现组件之间的通信功能。在Vue中，父组件和子组件可以通过传参的方式来实现通信。

下面通过实例来介绍四种常用的组件通信方式：

1. props和emit

props是一种传递数据的方式，允许父组件向子组件传递数据。之后子组件可以将props看做自己的数据来使用。emit是Vue中提供的一种自定义事件的方式，可以让子组件向父组件传递数据。

父组件传递数据给子组件的方式：

<template>
  <child :message="parentMessage"></child>
</template>

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

export default {
  components: { child },
  data () {
    return {
      parentMessage: 'Hello World'
    }
  }
}
</script>

子组件接收props的方式：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

子组件通过emit传递数据给父组件的方式：

<template>
  <button @click="sendData">发送数据给父组件</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('send-data', 'Hello from child')
    }
  }
}
</script>

父组件接收子组件传递的数据的方式：

<template>
  <child @send-data="receiveData"></child>
</template>

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

export default {
  components: { child },
  methods: {
    receiveData(data) {
      console.log(data) // Hello from child
    }
  }
}
</script>

2. $parent 和 $children

$parent和$children是Vue提供的一种简单的方式来访问父组件和子组件。$parent允许在子组件中访问父组件的属性和方法。在父组件中，可以通过v-bind指令或props的方式向子组件传递数据。$children允许在父组件中获取到所有子组件。但是需要注意，$parent和$children都不推荐使用，因为它们依赖了组件的实现结构，使代码耦合度过高，不便于维护。

<template>
  <child></child>
</template>

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

export default {
  components: { child },
  methods: {
    parentMethod() {
      console.log('Parent method')
    }
  }
}
</script>

子组件访问父组件的方式：

<template>
  <button @click="$parent.parentMethod()">访问父组件的方法</button>
</template>

父组件向子组件传递数据的方式：

<template>
  <child ref="child1"></child>
</template>

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

export default {
  components: { child },
  mounted() {
    this.$refs.child1.message = 'Hello from parent'
  }
}
</script>

子组件接收父组件传递的数据的方式：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

3. $emit和$on

$emit和$on是Vue提供的另一种自定义事件传播的方式。$emit用于触发一个自定义事件，而$on用于监听这个事件。

在父组件中触发事件的方式:

<template>
  <button @click="handleClick">发送自定义事件</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('custom-event', 'Hello from parent')
    }
  }
}
</script>

在子组件中监听事件的方式：

<template>
  <div></div>
</template>

<script>
export default {
  mounted() {
    this.$parent.$on('custom-event', (data) => {
      console.log(data) // Hello from parent
    })
  }
}
</script>

4. provide和inject

provide和inject是Vue中提供的一种依赖注入的方式。它可以将一个属性或方法注入到所有子组件中，使子组件可以直接访问父组件的属性和方法。

在父组件中provide数据的方式：

<template>
  <child></child>
</template>

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

export default {
  components: { child },
  provide: {
    message: 'Hello from parent' // 提供一个message属性，值为Hello from parent
  }
}
</script>

在子组件中inject数据的方式：

<template>
  <div>{{ parentMessage }}</div>
</template>

<script>
export default {
  inject: ['message'],
  computed: {
    parentMessage() {
      return this.message
    }
  }
}
</script>

综上所述，Vue提供了多种方式来实现父子组件之间的通信功能，开发者可以根据具体需求选择合适的方式来实现。但要注意，需要根据开发的实际需求、组件结构、代码维护等问题来选择合适的组件通信方式，避免钻牛角尖。同时建议使用Vuex管理全局状态，更好地解决组件之间的通信问题。