Discover the Expose function

Today, when I was looking at the Setup script syntax sugar, I found that the context is mentionedexposeFunction, and then look up the function, found is used in the setRef, source code in the value of the ref assignment code is as follows.

value = vnode.component! .exposed || vnode.component! .proxyCopy the code

Expose is used to maintain the encapsulation of vUE components.

Let’s first look at the ref method in VUe3:

The ref method is used to create a reactive data, as follows:

1. Import from VUE first

import { ref } from 'vue';
Copy the code

2. Use the ref method to create data

This is done by wrapping the original data in the ref method. Object type data Reactive activation is recommended. For details, see the VUe3 responsive document.

const testValue = ref(null);
const numberValue = ref(1);
const booleanValue = ref(false);
const stringValue = ref('string');
const arrVlue = ref([]);
Copy the code

3. Return data to the template

The purpose of this step is to enable the template to use the data and methods in the Setup function, without returning data and methods that are not needed by the template.

return { testValue, numberValue, booleanValue, stringValue, arrVlue }
Copy the code

So that’s how the ref method works, and then the question is, what does the ref method have to do with the expose function? Don’t worry, keep reading

The ref method is also used in a special way, like the REF in VUe2, to get an instance of an identified VUE component. The method described above is to define a null value of reactive data and return it to the template. The following scenarios are available:

1. The parent component father.vue

//Father.vue
<template>
  <div @click="handleClick">
    <h2>I'm the parent!</h2>
    <Child ref="child"  />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import Child from './Child.vue'

export default defineComponent({
  components: {
      Child
  },
  setup() {
    const child = ref(null)

    const handleClick = () = > {
      console.log(child.value);
      child.value.toDo();
    }

    return {
      child,
      handleClick
    }
  }
});
</script>
Copy the code

2. Child component child.vue

//Child.vue
<template>
  <span>I'm a child component</span>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup(props, context) {
    const data1 = ref(1);
    const data2 = ref('string');

    const toDo = () = > {
      console.log('1');
    }
    
    return {
      data1,
      data2,
      toDo
    }
  },
})
</script>
Copy the code

So what does clicking on the parent component print? The results are as follows:

It is not hard to see that the child gets an instance of the child component from which all its methods can be called and all its data can be accessed.

It is convenient to get an instance of a component directly, but there is a big problem – the parent component can get all the attributes and methods of the child component instance, which means that the child component is not encapsulated.

To solve this problem, use the Expose method.

Change the Child component child.vue to the following

<template>
  <span>I'm a child component</span>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup(props, context) {
    const data1 = ref(1);
    const data2 = ref('string');

    const toDo = () = > {
      console.log('1');
    }

    context.expose({
      data1
    });

    return {
      data1,
      data2,
      toDo
    }
  },
})
</script>
Copy the code

It simply adds a call to Expose, which receives an object that contains everything you want to export from the current component instance, much like encapsulating a module, exposing only the necessary methods and data.

Click the parent component again.

Huh? Why is it wrong? Take a look at the contents of child.value:

Note that child.value doesn’t have the properties and methods of the Vue component instance in it. Instead, the expose function doesn’t have toDo methods at all, which would definitely report an error.

You should get the idea by nowExpose functionWhat is it for? Use itExpose functionTo maintain component encapsulation by controlling the object content exposed when the component is ref.

Write it at the end (^.^)

If you think my writing is good, you can give me a thumbs up

If there is a wrong place, write bad place also please point out, for me to correct.

I’m CoCoyY1, a front-end enthusiast for documenting your learning.