在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方法会接收并处理这个数据。