Vue3.2 中新出的Expose用法一览

更新时间：2022年07月06日 10:47:28 作者：Marina Mosti

这篇文章主要介绍了Vue3.2 中新出的 Expose 是做啥用的,新的expose方法是非常直观的，而且很容易在我们的组件中实现，本文给大家介绍的非常详细，需要的朋友可以参考下

组合 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函数中加入了 props 和 context 参数。我们需要有可用的上下文，因为这是 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.vue
export 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 deleted
import { 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的调用，使其再次可用。

总结

新的 expose 方法是非常直观的，而且很容易在我们的组件中实现。它清除了一些非常重要的组成问题，这些问题在过去甚至需要重写一个完整的组件，所以即使它不是你日常使用的API，它也是值得收藏在我们文件夹中吃灰。

到此这篇关于Vue3.2 中新出的 Expose 是做啥用的？的文章就介绍到这了,更多相关Vue3.2 Expose 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue3
Expose

Vue自定义依赖引入的最佳实践记录
在现代前端开发中,自定义引入依赖是提升开发效率的关键,unplugin-auto-import插件可以帮助开发者自动引入JS模块,包括本地编写的工具方法和第三方库,通过简单的配置,开发者可以实现Vue基本库、本地文件以及第三方插件的自动引入
2024-10-10
vue 集成jTopo 处理方法
这篇文章主要介绍了vue 集成jTopo 处理方法，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-08-08
vue 添加vux的代码讲解
通过命令npm install vux --save添加vux，在相关配置文件中配置信息，具体代码添加方法，大家参考下本文
2017-11-11
vue异步请求数据重新渲染方式
这篇文章主要介绍了vue异步请求数据重新渲染方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-01-01
解决Vue+SpringBoot+Shiro跨域问题
本文将结合实例代码，解决Vue+SpringBoot+Shiro跨域问题，相信大家刚开始做都会遇到这个问题，需要的朋友们下面随着小编来一起学习学习吧
2021-06-06
Vue3中ref的用法举例总结(避免混淆)
这篇文章主要给大家介绍了关于Vue3中ref的用法举例总结的相关资料,ref()接受一个内部值,返回一个响应式的可更改的ref对象,此对象只有一个指向其内部值的属性.value,需要的朋友可以参考下
2023-10-10
vue中遇到scrollIntoView无效问题及解决
这篇文章主要介绍了vue中遇到scrollIntoView无效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
vue实现跨域的方法分析
这篇文章主要介绍了vue实现跨域的方法,结合实例形式分析了vue.js跨域的原理与相关实现技巧,需要的朋友可以参考下
2019-05-05
vue之el-form表单校验以及常用正则详解
这篇文章主要介绍了vue之el-form表单校验以及常用正则，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
详解Vue 中 extend 、component 、mixins 、extends 的区别
这篇文章主要介绍了Vue 中 extend 、component 、mixins 、extends 的区别,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-12-12