面试题：Vue组件化架构中如何实现父子组件通信

Question

在基于Vue的组件化架构设计与实现场景下，请详细描述父子组件之间进行通信的方式，包括数据传递和事件监听，并给出具体代码示例。

Answer 1

父子组件通信 - 数据传递

1. 父传子：通过 props 进行数据传递。 父组件模板 parent.vue：

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: '来自父组件的数据'
    };
  }
};
</script>

子组件 ChildComponent.vue：

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

<script>
export default {
  props: ['message']
};
</script>

2. 子传父：通过 $emit 触发自定义事件来传递数据。 子组件 ChildComponent.vue：

<template>
  <div>
    <button @click="sendDataToParent">点击传递数据给父组件</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      this.$emit('child-event', '子组件传递的数据');
    }
  }
};
</script>

父组件模板 parent.vue：

<template>
  <div>
    <child-component @child-event="handleChildEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: { ChildComponent },
  methods: {
    handleChildEvent(data) {
      console.log('接收到子组件数据:', data);
    }
  }
};
</script>

父子组件通信 - 事件监听

1. 父组件监听子组件事件：上述子传父示例中，父组件通过 @child-event="handleChildEvent" 监听子组件触发的 child-event 事件。
2. 子组件监听父组件事件（相对少见，可通过 provide/inject 结合自定义事件实现）： 父组件 parent.vue：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
import Vue from 'vue';
export default {
  components: { ChildComponent },
  provide() {
    const event = new Vue();
    return {
      event
    };
  },
  created() {
    this.$nextTick(() => {
      this.provide.event.$emit('parent-custom-event', '父组件触发的事件数据');
    });
  }
};
</script>

子组件 ChildComponent.vue：

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

<script>
export default {
  inject: ['event'],
  mounted() {
    this.event.$on('parent-custom-event', data => {
      console.log('接收到父组件自定义事件数据:', data);
    });
  }
};
</script>