面试题：Vue组件通信之父子组件通信

Question

在Vue中，如何实现父子组件之间的通信？请详细说明父传子和子传父的具体实现方式，包括使用的属性、方法等，并举例代码说明。

Answer 1

父传子

1. 实现方式：通过在父组件中给子组件标签添加自定义属性绑定数据，子组件通过props接收。
2. 使用属性和方法：
   • 父组件：在子组件标签上添加自定义属性，如<ChildComponent :data="parentData" />，这里parentData是父组件的数据。
   • 子组件：在props选项中声明接收的数据，如props: ['data']。
3. 示例代码：

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent :msg="parentMsg" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMsg: '这是来自父组件的数据'
    };
  }
};
</script>

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

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

子传父

1. 实现方式：子组件通过$emit触发一个自定义事件，父组件监听这个自定义事件并执行相应的方法。
2. 使用属性和方法：
   • 子组件：使用$emit方法触发事件，如this.$emit('childEvent', data)，data是要传递给父组件的数据。
   • 父组件：在子组件标签上监听自定义事件，如<ChildComponent @childEvent="handleChildEvent" />，handleChildEvent是父组件处理子组件传递数据的方法。
3. 示例代码：

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent @childEvent="handleChildData" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildData(data) {
      console.log('接收到子组件传递的数据:', data);
    }
  }
};
</script>

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

<script>
export default {
  methods: {
    sendDataToParent() {
      const data = '这是子组件传递的数据';
      this.$emit('childEvent', data);
    }
  }
};
</script>