Vue3.2에서 노출이란 무엇입니까? 무슨 소용이 있나요?

Vue3.2의 새로운 노출은 무엇에 사용되나요? 다음 기사는 Vue3.2의 노출 도구에 대한 좋은 이해를 제공할 것입니다. 도움이 되기를 바랍니다!

Vue 3.2 출시와 함께 expose라는 새로운 구성 도구가 제공됩니다. (학습 영상 공유: vue 영상 튜토리얼) expose。（学习视频分享：vue视频教程）

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

如果你在开发一个开源的组件或库，你有可能想保持一些内部方法的私有性。在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函数中加入了 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

템플릿에 일부 메서드와 속성을 제공해야 하는 구성 요소를 생성했지만 이러한 메서드를 구성 요소에만 비공개하고 상위 클래스에서 호출할 수 없도록 하려는 적이 있습니까? 🎜🎜오픈 소스 구성 요소나 라이브러리를 개발하는 경우 일부 내부 메서드를 비공개로 유지하고 싶을 수도 있습니다. Vue 3.2 이전에는 옵션 API에 선언된 모든 메소드나 데이터 등이 공개되어 템플릿이 액세스할 수 있었기 때문에 이를 달성하기가 쉽지 않았습니다. 🎜🎜컴포지션 API도 마찬가지입니다. setup 메서드에서 반환하는 모든 항목은 상위 클래스에서 직접 액세스할 수 있습니다. 🎜

Composition API

🎜실용적인 예를 살펴보겠습니다. 카운터를 생성하고 매초마다 이 카운터를 업데이트하는 구성 요소가 있다고 상상해 보십시오. 🎜🎜** MyCounter.vue** 🎜rrreee🎜 구성 관점에서 부모 구성 요소가 필요할 때 reset 메서드를 직접 호출할 수 있기를 원하지만 는 유지하고 싶습니다. 종료 함수 및 <code>counter에 대한 참조는 구성 요소에만 사용할 수 있습니다. 🎜🎜이 구성 요소를 App.vue와 같은 상위 클래스로 인스턴스화하고 참조 참조를 연결하면 상위 클래스가 reset 메서드를 호출하도록 쉽게 할 수 있습니다. setup에서 반환되었으며 terminate와 함께 노출되었습니다. 🎜🎜App.vue🎜rrreee🎜지금 실행하고 재설정 또는 종료 버튼을 클릭하면 둘 다 작동합니다. 🎜🎜reset 함수만 사용할 수 있도록 상위 클래스에 노출하려는 내용(expose)을 명시적으로 지정해 보겠습니다. 🎜🎜** MyCounter.vue**🎜rrreee🎜여기서 setup 함수에 props 및 context 매개변수를 추가했습니다. expose 함수가 있는 곳이므로 컨텍스트를 사용할 수 있어야 합니다. { 노출 }과 같은 리팩토링을 사용할 수도 있습니다. 🎜🎜다음으로, 이 예제에서는 context.expose를 사용하여 이 구성 요소를 인스턴스화하는 상위 클래스에 노출하려는 요소 개체를 선언합니다. /code> 기능을 사용할 수 있습니다. 🎜🎜이 예제를 다시 실행하고 "부모에서 종료" 버튼을 클릭하면 오류가 발생합니다. 🎜rrreee🎜 종료 기능은 더 이상 사용할 수 없으며 이제 비공개 API에 액세스할 수 없습니다. 🎜

옵션 API

🎜위에서는 composition API에서 exponse를 사용하지만 이 방법은 옵션 API에서도 사용할 수 있습니다. 다음과 같이 다시 작성할 수 있습니다. 🎜rrreee🎜'reset' 문자열이 우리가 노출하는 함수의 이름인 배열을 전달할 수 있는 새로운 옵션 API 속성 expose를 추가했습니다. . 🎜

API 렌더링 기능 결합

🎜 강력하고 유연한 구성 요소를 만드는 방법은 렌더링 기능의 힘을 활용하는 것입니다. 이는 Vue 3의 새로운 기능은 아니지만 구성 API의 설정으로 이제 setup 메서드에서 직접 구성 API h 함수를 반환할 수 있는 유연성을 갖게 되었습니다. 🎜🎜setup 함수에서 전체 return 문에 구성 요소가 생성하는 노드의 h만 포함되어 있기 때문에 문제가 발생합니다. . 🎜🎜이 시점에서 부모 클래스에 무언가를 노출하기로 선택하면 이전에 본 것과 반대되는 문제에 직면하게 됩니다. DOM 요소 외에는 아무것도 반환되지 않으므로 아무것도 노출되지 않습니다. 🎜🎜이 메서드를 사용하도록 MyCounter.vue 구성 요소를 재정의해 보겠습니다. 🎜rrreee🎜 DOM 요소를 생성하는 데 필요하기 때문에 상단의 Vue에서 h를 가져왔습니다. 🎜🎜문제를 설명하기 위해 context.expose 메서드에 일시적으로 주석을 달았습니다. 🎜🎜이제 return 문은 이전 <template>의 DOM 구조를 복사하며 이 예제를 실행하면 요소의 재설정 및 종료 버튼을 올바르게 클릭할 수 있습니다. 🎜🎜그러나 지금 "부모로부터 재설정" 버튼을 클릭하면 오류가 발생합니다. 🎜rrreee🎜 reset 메소드는 setup 함수에 의해 반환되지 않기 때문에 더 이상 노출되지 않습니다. 이 문제를 해결하려면 context.expose 호출을 취소하여 다시 사용할 수 있도록 해야 합니다. 🎜

요약

새로운 expose 메서드는 매우 직관적이고 구성 요소에서 구현하기 쉽습니다. 과거에 전체 구성 요소를 다시 작성해야 했던 몇 가지 매우 중요한 구성 문제를 해결하므로 매일 사용하는 API가 아니더라도 폴더에 수집하고 먼지를 모을 가치가 있습니다.

원문 영문 텍스트: https://www.vuemastery.com/blog/understanding-vue-3-expose/

[추천 관련 비디오 튜토리얼: vuejs 입문 튜토리얼, 웹 프론트엔드 시작하기 ]

위 내용은 Vue3.2에서 노출이란 무엇입니까? 무슨 소용이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!