Vue 2 內子組件對父組件的函式調用與父組件對子組件之互動傳值及方法呼叫

在Vue.js 2中，父子组件之间的通信是通过props（单向）和事件（双向）来实现的。下面将详细介绍如何在父组件与子组件之间进行方法调用以及数据传递。

1. 父组件调用子组件的方法

为了实现这一点，我们可以使用`$emit`方法。在子组件内部定义一个需要被调用的方法，然后通过`$on`或`@eventName`语法监听来自子组件的特定事件。在父组件中，我们可以在子组件上绑定一个自定义事件处理器，并在其中执行想要触发的方法。以下是如何实现这个过程的步骤:

在子组件中定义一个方法:

methods: {
someMethod() { // 这是需要在父组件中被调用的方法
// 这里可以编写一些逻辑或者处理某些事情
}
},

在子组件中发出一个自定义事件:

<template>
<!-- 假设这是一个名为'my-child-component'的子组件 -->
<div>
<button @click="$emit('callSomeMethod')">调用父组件中的方法</button>
</div>
</template>

在父组件中监听子组件的事件:

// 在父组件的script部分添加以下代码:
components: {
MyChildComponent: MyChildComponent // 如果这个子组件是被注册为全局组件的话
},
mounted () {
this.$children[0].$on('callSomeMethod', this.doSomething); // 监听子组件发出的 'callSomeMethod' 事件
},
methods: {
doSomething() { // 这是父组件想要在子组件发出事件时触发的函数
console.log('我在父组件中被调用了!');
}
}

这样当用户点击子组件上的按钮时，它会发出 `’callSomeMethod’` 事件，而父组件会接收到该事件并触发其 `doSomething()` 方法。

2. 子组件调用父组件的方法

为了达到这个目的，我们需要确保父组件有一个公开可访问的方法。这通常是通过给父组件提供一个prop来实现，即一个用于接收数据的特殊属性。子组件可以通过这个prop来调用父组件的方法。以下是具体的步骤:

在父组件中暴露一个方法作为 prop:

export default {
name: "ParentComponent",
props: ['parentMethod'],
methods: {
parentMethod() { // 这是子组件将要调用的方法
console.log("我被子组件调用了！")
}
}
};

将此 prop 提供给子组件:

<template>
<!-- 在父组件的模板中包含子组件 -->
<SubComp :parentMethod="parentMethod" />
</template>

在子组件中调用父组件的方法:

import Vue from 'vue';

export default {
methods: {
methodToCallOnParent() {
if (this.$parent && typeof this.$parent.parentMethod === 'function') {
// 直接调用父组件的方法
this.$parent.parentMethod();
} else {
console.error('无法找到父组件的方法');
}
}
}
};

注意：在使用这种方法之前，请确保你已经理解了Vue组件生命周期和响应式系统的工作原理，因为这些概念对于正确地构建和管理组件之间的关系至关重要。