Vue2父子组件通信

在Vue 2中，父子组件间的通信可以通过以下方式实现：

1. 父组件向子组件传递数据使用props。

2. 子组件向父组件传递数据使用自定义事件。

父组件：

<template>
  <div>
    <child-component :parentData="message" @childEvent="handleChildEvent"></child-component>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    'child-component': ChildComponent
  },
  data() {
    return {
      message: 'Hello from parent'
    };
  },
  methods: {
    handleChildEvent(payload) {
      console.log('Received from child:', payload);
    }
  }
};
</script>

子组件：

<template>
  <div>
    <p>{{ parentData }}</p>
    <button @click="sendToParent">Send to Parent</button>
  </div>
</template>
 
<script>
export default {
  props: ['parentData'],
  methods: {
    sendToParent() {
      this.$emit('childEvent', 'Hello from child');
    }
  }
};
</script>

在这个例子中，父组件通过props将数据传递给子组件，子组件通过点击按钮并使用$emit触发自定义事件向父组件发送消息。父组件通过监听这个事件来接收消息。