#yyds干货盘点#Vue3中的expose函数

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

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

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

1.父组件Father.vue

//Father.vue

2.子组件Child.vue

//Child.vue

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

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

其实也就只是增加了expose的调用，expose接收一个对象，里面包含了所有想从当前组件实例导出的内容，就像封装一个模块一样，只向外暴露一些必要的方法和数据。

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.e1idc.net

我是父组件!