文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue3.2中的expose有什么作用

2023-07-02 15:51

关注

这篇文章主要讲解了“Vue3.2中的expose有什么作用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue3.2中的expose有什么作用”吧!

Vue3.2中的expose有什么作用

随着Vue 3.2的发布,一个新的组合工具提供给我们,叫做 expose

你是否曾经创建过一个需要向模板提供一些方法和属性的组件,但又希望这些方法对组件是私有的,不能被父类调用?

如果你在开发一个开源的组件或库,你有可能想保持一些内部方法的私有性。在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,      reset,      terminate    }  }}</script>

从组合的角度来看,我希望父级组件能够在需要时直接调用reset方法--但我希望保持terminate 函数和 counter 的引用只对组件可用。

如果我们把这个组件实例化到一个父类中,例如 App.vue,并给它附加一个 ref 引用,我们可以很容易地让父类调用 reset 方法,因为当我们从 setup 中返回它时,它已经和 terminate 一起被暴露了。

App.vue

<template>  <MyCounter ref="counter" />  <button @click="reset">Reset from parent</button>  <button @click="terminate">Terminate from parent</button></template><script>import MyCounter from '@/components/MyCounter.vue'export default {  name: 'App',  components: {    MyCounter  },  methods: {    reset () {      this.$refs.counter.reset()    },    terminate () {      this.$refs.counter.terminate()    }  }}</script>

如果现在运行这个,并单击重置或终止按钮,两者都可以工作。

让我们明确说明我们要向父类暴露(expose)的内容,以便只有 reset 函数可用。

** MyCounter.vue**

<script>import { ref } from 'vue'export default {  setup (props, context) {    const counter = ref(null)    const interval = setInterval(() => {      counter.value++    }, 1000)    const reset = () => {      counter.value = 0    }    const terminate = () => {      console.log(interval)      clearInterval(interval)    }    context.expose({ reset })    return {      counter,      reset,      terminate    }  }}</script>

这里,我们在setup函数中加入了 propscontext 参数。我们需要有可用的上下文,因为这是 expose 函数的位置。我们也可以像这样使用重构: { expose }

接下来,我们使用 context.expose 来声明一个我们想要向实例化这个组件的父类公开的元素对象;在这个例子中,我们只打算让 reset 功能可用。

如果我们再次运行这个例子,并点击 "Terminate from parent" 按钮,我们会得到一个错误。

Uncaught TypeError: this.$refs.counter.terminate is not a function

terminate 功能不再可用,我们的私有API现在也无法访问了。

选项API

上面我们在 composition API 使用 exponse,但在options API中也可以使用这个方法。我们可以把它改写成如下。

//  MyCounter.vueexport default {  created () { ... },  data: () => ({ counter: null }),  methods: {    reset () { ... },    terminate () { ... }  },  expose: ['reset']}

注意,我们添加了一个新的选项API属性expose,允许我们传入一个数组,其中字符串'reset'是我们公开的函数的名称。

组合API 渲染功能

创建一个强大脸灵活的组件的方法是利用渲染函数的力量。这对Vue 3来说并不新鲜,但是随着composition API的建立,我们现在可以灵活地从setup方法中直接返回组合API h 函数。

这就产生了一个问题,因为在我们的setup函数中,整个return语句只是包含组件正在创建的节点的 h 方法。

如果在这个时候我们选择向父类 expose 一些东西,我们就会遇到与我们之前看到的相反的问题。没有任何东西被暴露,因为除了DOM元素,没有任何东西被返回。

让我们重写 MyCounter.vue 组件来使用这个方法。

<script>// The template has been deletedimport { ref, h } from 'vue'export default {  setup (props, context) {    const counter = ref(0)    const interval = setInterval(() => {      counter.value++    }, 1000)    const reset = () => {      counter.value = 0    }    const terminate = () => {      clearInterval(interval)    }    // context.expose({ reset })    return () => h('div', [      h('p', `Counter: ${counter.value}`),      h('button', { onClick: reset }, 'Reset'),      h('button', { onClick: terminate }, 'Terminate')    ])  }}</script>

注意,我们在顶部从Vue导入了 h,因为我们需要用它来创建我们的DOM元素。

为了说明问题,暂时注释了context.expose方法。

现在的 return 语句复制了我们之前的 <template> 的DOM结构,如果我们运行这个例子,我们能够正确点击元素上的重置和终止按钮。

然而,如果我们现在点击 "Reset from parent"按钮,我们会遇到一个错误。

Uncaught TypeError: this.$refs.counter.reset is not a function

reset方法不再被暴露,因为它没有被setup函数返回。为了解决这个问题,我们需要取消对context.expose的调用,使其再次可用。

感谢各位的阅读,以上就是“Vue3.2中的expose有什么作用”的内容了,经过本文的学习后,相信大家对Vue3.2中的expose有什么作用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯