【三十天精通Vue 3】第十二天 Vue 3 的函数式组件详解（过滤器已废弃）

引言

函数式组件是 Vue3 中的一个重要概念，它是一种轻量级的组件形式，具有高效、简洁和可复用等优点。在本文中，我们将详细介绍 Vue3 函数式组件的概念、应用场景、高级应用以及注意事项和常见问题。我们还会给出相应的代码示例，帮助读者更好地理解和掌握函数式组件的使用方法。

一、Vue3 中的函数式组件

4.2 函数式组件中如何使用this

在 Vue3 的函数式组件中，不能像普通组件那样使用 this 来访问组件实例。因为函数式组件本质上是一个纯函数，不会有组件实例的概念。

但是，Vue3 提供了 getCurrentInstance API，可以在函数式组件内获取到当前组件实例。通过 getCurrentInstance().proxy 可以获取到当前组件实例的代理对象，进而访问组件实例的属性和方法。

以下是一个示例：

<template functional>
  <div>
    <p>当前计数：{{ getCurrentInstance().proxy.count }}</p>
    <button @click="getCurrentInstance().proxy.increment">增加</button>
  </div>
</template>
​
<script>
import { getCurrentInstance } from 'vue'
​
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

4.3 函数式组件中的v-model

在 Vue3 的函数式组件中，可以使用 v-bind 和 v-on 指令来实现 v-model 的功能。具体来说，使用 v-bind:modelValue 绑定组件的值，使用 v-on:update:modelValue 监听组件的值变化。注意，这里的 modelValue 是自定义的属性名，可以根据实际情况进行命名。

以下是一个示例：

</script>