Vue3.2 中新出的Expose用法一览

Vue3.2 中出现了一个新特性 Expose，这个特性可以让我们更方便地将组件的内部逻辑和对外的数据或方法隔离开来。下面我将提供关于如何使用此特性的完整攻略。

Expose 是什么

在 Vue3.0 中，如果我们想将一些只有内部逻辑使用的方法暴露给组件的使用者使用，我们可以将它们放在 methods 选项中。然后在组件中使用 this.$emit() 的方式将这些方法暴露出去。

而 Expose 的出现，让我们更加方便地对组件的内部逻辑和对外数据或方法进行隔离。

简单来说， Expose 就是一个语法糖，可以将一些内部方法或数据暴露给组件的使用者，避免直接暴露全部的内部方法和数据造成的混乱和不可预测。

如何使用 Expose

1. 基本使用

使用 Expose 的方式很简单：我们只需要在组件内定义一个名为 expose 的属性，将需要暴露出去的内部方法或数据添加到这个属性中即可。

例如，我们有一个计数器组件，它的内部逻辑中有个 increment() 方法。我们需要将这个方法暴露给使用者使用：

<template>
  <div>
    <button @click="increment">{{ count }}</button>
  </div>
</template>

<script>
export default {
  name: 'Counter',
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  expose: ['increment']
}
</script>

如上，在定义组件时，我们将 increment 方法添加到了 expose 属性中，并定义了组件的名称、内部数据等必要属性。

这样，当组件的使用者需要使用 increment 方法时，只需要在父组件中调用这个方法即可。

1. 自定义暴露方法名

我们可以自定义 expose 方法的名称，来更好地表达方法的用途。例如，我们可以将上述例子中的 increment 方法重命名为 add：

<template>
  <div>
    <button @click="add">{{ count }}</button>
  </div>
</template>

<script>
export default {
  name: 'Counter',
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  expose: { add: 'increment' }
}
</script>

通过使用 '{'()}的形式，我们可以将内部方法 increment 重命名为 add。这样，父组件在调用此方法时就需要使用 add() 来调用。

示例说明

示例 1：使用 ref 获取组件实例并调用 Expose 方法

我们在父组件中可以使用 ref 属性获取子组件的实例，并调用其 expose 方法：

<template>
  <div>
    <Counter ref="counter" />
    <button @click="handleClick">Add</button>
  </div>
</template>

<script>
import Counter from './components/Counter.vue'

export default {
  components: { Counter },
  methods: {
    handleClick() {
      this.$refs.counter.add()
    }
  }
}
</script>

在此示例中，我们将子组件 Counter 添加到父组件中，使用了 ref 属性获取了 Counter 的实例，并在 handleClick 方法中调用了其 add 方法。

示例 2：使用 $refs 获取组件实例并调用 Expose 方法

如果我们在父组件中想要通过 $refs 来获取子组件的实例并调用其 expose 方法，我们可以采用如下方式：

<template>
  <div>
    <Counter ref="counter" />
    <button @click="handleClick">Add</button>
  </div>
</template>

<script>
import Counter from './components/Counter.vue'

export default {
  components: { Counter },
  methods: {
    handleClick() {
      this.$refs.counter.$expose.add()
    }
  }
}
</script>

在此示例中，我们将子组件 Counter 添加到父组件中，使用了 ref 属性获取了 Counter 的实例，并在 handleClick 方法中调用了其 $expose 属性，并使用 add 方法进行了调用。

至此，Expose 的完整攻略就讲解完毕了。希望能够对您有所帮助。