#yyds干货盘点#Vue3中的expose函数-CFANZ编程社区

发现expose函数

今天在看setup script语法糖的时候发现有说到context上的expose函数，然后就查了一下这个函数，发现是在setRef中被使用到，源码中在对ref的value赋值时的代码如下。

value = vnode.component!.exposed || vnode.component!.proxy

vue3中的ref方法

ref方法用于创建一个响应式的数据，其使用方法大致如下：

1.先从vue中引入

import { ref } from 'vue';

2.使用ref方法创建数据

具体使用方式就是用ref方法包裹原本的数据。对象类型数据推荐使用reactive激活响应式

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

3.返回数据到模板

这一步的目的是让模板能够使用到setup函数中的数据和方法，对于模板无需使用的数据和方法可以不进行返回。

return { testValue, numberValue, booleanValue, stringValue, arrVlue }

ref方法和expose函数的关系

ref方法还有一种特殊的用法，就是像vue2中的ref一样，用来获取一个确定的vue组件实例。使用的方法就是上面所说，在定义了一个值为null的响应式数据之后，将其返回给模板使用即可。现有如下情景：

1.父组件Father.vue

//Father.vue
<template>
  <div @click="handleClick">
    <h2>我是父组件!</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>

2.子组件Child.vue

//Child.vue
<template>
  <span>我是子组件</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>

不难看出child所获取到的就是子组件的实例，可以通过该实例调用其所有方法和访问其所有数据。

expose的封装性

将子组件Child.vue改为如下内容

<template>
  <span>我是子组件</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>