这篇文章主要讲解了“Vue3.2中的expose有什么作用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue3.2中的expose有什么作用”吧！随着Vue 3.2的发布，一个新的组合工具提供给我们，叫做 expose。你是否曾经创建过一个需要向模板提供一些方法和属性的组件，但又希望这些方法对组件是私有的，不能被父类调用？如果你在开发一个开源的组件或库，你有可能想保持一些内部方法的私有性。在Vue 3.2之前，这并不容易实现，因为所有在选项API中声免费云主机域名明的方法或数据等都是公开的，所以模板可以访问它。组合API也是如此。我们从setup方法中返回的所有东西都可以被父类直接访问。让我们看一个实际的例子。想象一下，我们有一个组件，它创建了一个计数器，每一秒都会更新这个计数器。** MyCounter.vue**Counter:{{counter}}从组合的角度来看，我希望父级组件能够在需要时直接调用reset方法–但我希望保持terminate 函数和 counter 的引用只对组件可用。如果我们把这个组件实例化到一个父类中，例如 App.vue，并给它附加一个 ref 引用，我们可以很容易地让父类调用 reset 方法，因为当我们从 setup 中返回它时，它已经和 terminate 一起被暴露了。App.vue如果现在运行这个，并单击重置或终止按钮，两者都可以工作。让我们明确说明我们要向父类暴露(expose)的内容，以便只有 reset 函数可用。** MyCounter.vue**这里，我们在setup函数中加入了 props 和 context 参数。我们需要有可用的上下文，因为这是 expose 函数的位置。我们也可以像这样使用重构: { expose }。接下来，我们使用 context.expose 来声明一个我们想要向实例化这个组件的父类公开的元素对象；在这个例子中，我们只打算让 reset 功能可用。如果我们再次运行这个例子，并点击 “Terminate from parent” 按钮，我们会得到一个错误。terminate 功能不再可用，我们的私有API现在也无法访问了。上面我们在 composition API 使用 exponse，但在options API中也可以使用这个方法。我们可以把它改写成如下。注意，我们添加了一个新的选项API属性expose，允许我们传入一个数组，其中字符串'reset'是我们公开的函数的名称。创建一个强大脸灵活的组件的方法是利用渲染函数的力量。这对Vue 3来说并不新鲜，但是随着composition API的建立，我们现在可以灵活地从setup方法中直接返回组合API h 函数。这就产生了一个问题，因为在我们的setup函数中，整个return语句只是包含组件正在创建的节点的 h 方法。如果在这个时候我们选择向父类 expose 一些东西，我们就会遇到与我们之前看到的相反的问题。没有任何东西被暴露，因为除了DOM元素，没有任何东西被返回。让我们重写 MyCounter.vue 组件来使用这个方法。注意，我们在顶部从Vue导入了 h，因为我们需要用它来创建我们的DOM元素。为了说明问题，暂时注释了context.expose方法。现在的 return 语句复制了我们之前的 的DOM结构，如果我们运行这个例子，我们能够正确点击元素上的重置和终止按钮。然而，如果我们现在点击 “Reset from parent”按钮，我们会遇到一个错误。reset方法不再被暴露，因为它没有被setup函数返回。为了解决这个问题，我们需要取消对context.expose的调用，使其再次可用。感谢各位的阅读，以上就是“Vue3.2中的expose有什么作用”的内容了，经过本文的学习后，相信大家对Vue3.2中的expose有什么作用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是百云主机，小编将为大家推送更多相关知识点的文章，欢迎关注！
本文小编为大家详细介绍“Qt如何实现图形裁减免费云主机域名”，内容详细，步骤清晰，细节处理妥当，希望这篇“Qt如何实现图形裁减”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。main.cpp读到这里，这篇“Qt如何实现图形裁减”文章已…
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
微信扫一扫 
