【Vue】组件通信与方法暴露实践

在Vue.js应用中，组件通信和方法的暴露是常见的需求，特别是当我们需要在一个组件中访问另一个组件的方法时。本文将介绍如何使用Vue.js来实现这一功能，以及一个实际的示例。

组件通信

Vue.js提供了多种方法来实现组件之间的通信，其中一个常见的方式是使用自定义事件。在组件内部，我们可以使用$emit来触发自定义事件，而在父组件中，我们可以使用@符号来监听这些事件。

在下面的示例中，我们有一个名为base-info-form的子组件，它在mounted钩子中触发了一个自定义事件init：

mounted() {
  this.$nextTick(() => {
    this.$emit('init', this.provideInterface())
  });
},
1
2
3
4
5

方法暴露

在上述示例中，我们需要将一些内部方法暴露给父组件。为了实现这一点，我们创建了一个名为provideInterface的方法，该方法返回一个包含需要暴露的方法和属性的对象：

provideInterface() {
  return {
  	// 这里只是举几个例子，可以根据你的需求增添
    waitSubsidyList: this.waitSubsidyList, // 暴露属性
    validate: this.$refs.uForm.validate // 暴露方法
  }
},
1
2
3
4
5
6
7

其中，waitSubsidyList是一个属性，而validate是一个方法。我们希望能够在父组件中访问validate方法。

一定要注意！！！！
validate: this.$refs.uForm.validate 这里方法后面不要加括号，否则就是指向方法，而不是属性了！！！！！
waitSubsidyList: this.waitSubsidyList 这里只适用于对象、数组这种引用类型，并且后续改变他们的值的时候不可以改变this.waitSubsidyList其引用地址！！！！！

在页面中的使用

在父组件中，我们可以使用@init来监听子组件触发的init事件，并将返回的对象保存在一个变量中：

<base-info-form @init="baseInfoInit" ref="baseInformation">base-info-form>
1

// 基本信息初始化
baseInfoInit(baseInfoCtx) {
  this.baseInfoCtx = baseInfoCtx
},
1
2
3
4

现在，我们可以通过baseInfoCtx变量来访问子组件base-info-form暴露的方法和属性。

方法调用

最后，让我们看一下如何在父组件中调用子组件的方法。假设我们想调用子组件的validate方法：

const valid = await this.baseInfoCtx.validate();
// 如果使用原本的 $refs 查找调用就应这样写，可读性大大降低：
// const valid = await this.$refs.baseInformation.$refs.uForm.validate();
1
2
3

通过上述步骤，我们成功地将子组件的方法暴露给了父组件，并且可以在父组件中调用它们。

总结

在Vue.js中，组件通信和方法的暴露是非常常见的需求。通过使用自定义事件和对象暴露方法，我们可以轻松地在组件之间实现通信和方法调用。这种模式使代码更加清晰和可维护，有助于更好地组织Vue.js应用程序。