理解Vue3组合式API 通过 setup暴露数据和方法的使用场景

让我举一个例子来说明如何在 Vue 3 中通过 setup 函数暴露数据和方法，并在当前组件及其子组件中使用。

假设我们有一个计数器组件 Counter.vue，其中包含一个计数器和一个按钮，点击按钮可以增加计数器的值。

Counter.vue：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <ChildComponent :childCount="count" />
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment
    };
  }
};
</script>

在这个例子中，Counter.vue 组件中通过 setup 函数创建了一个响应式的计数器变量 count，以及一个增加计数器的方法 increment。然后，通过 return 语句将这些数据和方法暴露出去。

在模板中，我们直接使用了 count 和 increment，并将 count 的值传递给了子组件 ChildComponent。接下来，我们来看一下子组件的实现。

ChildComponent.vue：

<template>
  <div>
    <p>Child Count: {{ childCount }}</p>
  </div>
</template>

<script>
export default {
  props: {
    childCount: {
      type: Number,
      required: true
    }
  }
};
</script>

在子组件 ChildComponent.vue 中，我们接收了一个名为 childCount 的 prop，用于接收父组件传递过来的计数器值。然后在模板中直接使用了这个 prop 来显示计数器的值。

这样，我们就实现了在父组件及其子组件中共享和使用通过 setup 函数暴露出的数据和方法。

---

在 Vue 2 中，没有像 Vue 3 中的 setup 函数来明确地暴露数据和方法。相反，数据和方法是直接定义在组件实例的 data 和 methods 选项中的，而不需要明确地暴露出去。

在 Vue 2 中，你可以使用与 Vue 3 中相似的方式将数据和方法传递给子组件，尽管语法上稍有不同。以下是将数据和方法传递给子组件的示例：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <ChildComponent :childCount="count" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

在 Vue 2 中，数据和方法通常都是通过 data 和 methods 选项来定义的。在上面的例子中，我们使用了 data 选项来定义 count 变量，并使用 methods 选项来定义 increment 方法。然后，我们将 count 数据通过 childCount 属性传递给了子组件 ChildComponent。

Vue 2 中的组件和 Vue 3 中的 setup 函数有一些区别，但基本概念是相同的。通过在 Vue 2 的组件选项中定义数据和方法，然后在模板中使用它们，并将它们通过 props 传递给子组件，你可以实现与 Vue 3 中类似的功能。