掌握 Vue3 中的 expose

最新推荐文章于 2024-06-18 09:00:43 发布

奋斗的工程师

最新推荐文章于 2024-06-18 09:00:43 发布

阅读量5.2k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_53641036/article/details/126835221

版权

本文介绍了在Vue3中如何使用expose保护组件的内部方法，通过组合API和选项API的示例，阐述了expose在保持组件私有API方面的功能。在组合API中，通过expose限制了父组件对子组件方法的访问，而在选项API中，expose用于指定对外公开的方法。此外，还讨论了在使用渲染函数时expose的注意事项。

摘要由CSDN通过智能技术生成

我从3A平台购买了云服务器。如果你在开发一个开源的组件或库，你有可能想保持一些内部方法的私有性。在Vue 3.2之前，这并不容易实现，因为所有在选项API中声明的方法或数据等都是公开的，所以模板可以访问它。

组合API也是如此。我们从setup方法中返回的所有东西都可以被父类直接访问。

组合 API

让我们看一个实际的例子。想象一下，我们有一个组件，它创建了一个计数器，每一秒都会更新这个计数器。

MyCounter.vue

<template>
    <p>Counter: {
 { counter }}</p>

    <button @click="reset">Reset</button>
    <button @click="terminate">☠️</button>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const counter = ref(0)

    const interval = setInterval(() => {
      counter.value++
    }, 1000)

    const reset = () => {
      counter.value = 0
    }

    const terminate = () => {
      clearInterval(interval)
    }

    return {
      counter,
      r