Vue2中子组件调用父组件的方法，父组件调用子组件的方法，父子组件互相传值和方法调用

在Vue2中，父子组件之间的通信可以通过props传递数据和events（事件）调用方法来实现。子组件可以通过$emit来触发事件，父组件监听这些事件并调用相应的方法。

以下是父子组件互相传值和调用方法的示例代码：

父组件：

<template>
  <div>
    <child-component
      :parent-message="messageFromParent"
      @child-method="parentMethod"
    ></child-component>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      messageFromParent: 'Hello from parent'
    };
  },
  methods: {
    parentMethod(dataFromChild) {
      console.log('Data from child:', dataFromChild);
    }
  }
};
</script>

子组件：

<template>
  <div>
    <button @click="sendToParent">Send to Parent</button>
  </div>
</template>
 
<script>
export default {
  props: {
    parentMessage: String
  },
  methods: {
    sendToParent() {
      const dataToSend = 'Hello from child';
      this.$emit('child-method', dataToSend);
    }
  }
};
</script>

在这个例子中，父组件通过props传递messageFromParent给子组件，并监听子组件触发的child-method事件。子组件有一个按钮，当点击时，它会通过$emit触发child-method事件，并将数据传递给父组件。父组件的parentMethod方法会接收并处理这个数据。