Vue 父组件调用子组件方法及事件
在 Vue 中，父组件调用子组件方法及事件是非常常见的需求，特别是在复杂的组件树中。今天，我们将详细介绍如何实现父组件调用子组件方法及事件。
父组件调用子组件方法
在上面的例子中，我们可以看到父组件中引入了上传附件的子组件，点击组件可以分别上传对应要求的图片。子组件内部循环可创建多个模块，所有事件都在子组件内部。父组件页面的上方同时有一个上传图片按钮上传图片后会显示在第一个模块。
为了实现父组件调用子组件方法，我们可以使用 `ref` 属性将子组件实例传递给父组件，然后在父组件中使用 `this.$refs.refName.method` 来调用子组件方法。
例如，在上面的例子中，我们在子组件中定义了 `fileClick` 方法，然后在父组件中使用 `this.$refs.uploadRef.fileClick(0)` 来调用子组件的 `fileClick` 方法。
父组件调用子组件事件
在 Vue 中，还有另一种方式可以实现父组件调用子组件事件，即使用 `$emit` 方法在子组件中发出事件，然后在父组件中使用 `$on` 方法来监听事件。
例如，在上面的例子中，我们可以在子组件中定义 `callMethod` 方法，然后在父组件中使用 `this.$refs.child.$emit('childMethod')` 来发出事件。然后，在子组件中使用 `this.$on('childMethod', function () { console.log('监听成功') })` 来监听事件。
总结
在本文中，我们详细介绍了如何实现父组件调用子组件方法及事件。我们可以使用 `ref` 属性将子组件实例传递给父组件，然后使用 `this.$refs.refName.method` 来调用子组件方法。或者，我们可以使用 `$emit` 方法在子组件中发出事件，然后在父组件中使用 `$on` 方法来监听事件。
希望本文能够帮助大家更好地理解 Vue 父组件调用子组件方法及事件的实现方式。如果大家有任何疑问，请随时留言，我们将及时回复。
