面试题：Vue组件化中如何实现父子组件间高效的数据传递与通信

Question

在Vue组件化开发中，父子组件间的数据传递与通信是非常基础且重要的部分。请阐述在Vue中实现父子组件间数据传递与通信的方式，并且举例说明如何通过props向下传递数据以及通过自定义事件向上传递数据，同时说明在这个过程中需要注意哪些要点以确保高效的通信。

Answer 1

父子组件间数据传递与通信方式

1. 通过 props 向下传递数据：父组件向子组件传递数据。父组件在引用子组件标签上以属性形式绑定数据，子组件通过 props 选项接收。
2. 通过自定义事件向上传递数据：子组件向父组件传递数据。子组件使用 $emit 触发自定义事件，并携带数据，父组件在引用子组件标签上监听该自定义事件。
3. 使用 $parent 和 $children：子组件通过 $parent 访问父组件实例，父组件通过 $children 访问子组件实例，但这种方式耦合度较高，不推荐频繁使用。
4. 依赖注入（provide 和 inject）：适用于隔代组件通信。父组件通过 provide 提供数据，后代组件通过 inject 注入数据。

通过 props 向下传递数据示例

1. 父组件：

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

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  }
};
</script>

2. 子组件：

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

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

通过自定义事件向上传递数据示例

1. 子组件：

<template>
  <div>
    <button @click="sendDataToParent">Send Data</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      this.$emit('child-event', 'Data from child');
    }
  }
};
</script>

2. 父组件：

<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. props 单向数据流：props 是单向绑定的，子组件不应直接修改 props 值。若需修改，应在子组件 data 中定义新变量接收并操作。
2. 自定义事件命名：避免与原生 DOM 事件同名，防止冲突。
3. 数据验证：在 props 中定义类型、默认值等验证，确保传递数据的正确性。
4. 事件解绑：在组件销毁时，确保手动绑定的自定义事件已解绑，避免内存泄漏，例如使用 $once 绑定只触发一次的事件。