What is expose in Vue3.2? What is the use?

What is the new expose in Vue3.2 used for? The following article will give you a good understanding of the expose tool of Vue3.2. I hope it will be helpful to you!

With the release of Vue 3.2, a new composition tool is provided to us called expose. (Learning video sharing: vue video tutorial)

Have you ever created a component that needs to provide some methods and properties to the template, but you want these methods to be private to the component and cannot Called by parent class?

If you are developing an open source component or library, you may want to keep some internal methods private. Prior to Vue 3.2, this was not easy to achieve because all methods or data etc. declared in the options API were public, so the template could access it.

The same is true for the composition API. Everything we return from the setup method can be directly accessed by the parent class.

Composition API

Let’s look at a practical example. Imagine we have a component that creates a counter and updates this counter every second.

** 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>

From a composition perspective, I would like the parent component to be able to call the reset method directly when needed -- but I It is desirable to keep references to the terminate function and counter only available to the component.

If we instantiate this component into a parent class, such as App.vue, and attach a ref reference to it, we can easily let the parent class call the reset method, Because when we return it from setup, it is already exposed along with 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>

If I run this now and click the reset or kill button, both will work.

Let's explicitly state what we want to expose (expose) to the parent class so that only the reset function is available.

** 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>

Here, we added props and context to the setup function parameter. We need to have the context available because this is where the expose function is. We can also use refactoring like this: { expose }.

Next, we use context.expose to declare an element object that we want to expose to the parent class that instantiates this component; in this example, we are only going to ## The #reset function is available.

If we run this example again and click the "Terminate from parent" button, we will get an error.

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

terminate functionality is no longer available and our private API is now inaccessible.

Options API

Above we used

exponse in composition API, but this method can also be used in options API . We can rewrite it as follows.

//  MyCounter.vue


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

Note that we have added a new options API property

expose, allowing us to pass in an array where the string 'reset' is our exposed function The name.

Combining API Rendering Functions

The way to create a powerful and flexible component is to harness the power of rendering functions. This is not new to Vue 3, but with the establishment of the composition API, we now have the flexibility to return composition API

h functions directly from setup methods.

This creates a problem because in our

setup function, the entire return statement just contains the h## of the node that the component is creating. # method. If we choose to expose something to the parent class at this time, we will encounter the opposite problem to what we saw before. Nothing is exposed because nothing is returned except DOM elements.

Let's override the

MyCounter.vue

component to use this method. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;script&gt; // The template has been deleted import { ref, h } from 'vue' export default {   setup (props, context) {     const counter = ref(0)     const interval = setInterval(() =&gt; {       counter.value++     }, 1000)     const reset = () =&gt; {       counter.value = 0     }     const terminate = () =&gt; {       clearInterval(interval)     }     // context.expose({ reset })     return () =&gt; h('div', [       h('p', `Counter: ${counter.value}`),       h('button', { onClick: reset }, 'Reset'),       h('button', { onClick: terminate }, 'Terminate')     ])   } } &lt;/script&gt;</pre><div class="contentsignin">Copy after login</div></div>Note that we imported

h

from Vue at the top because we need it to create our DOM elements. To illustrate the problem, the

context.expose

method is temporarily commented. The return statement now copies the DOM structure of our previous