我们在之前学习过获取dom元素和组件实例使用的this.$refs，但是现在使用setup函数中没有this指针，我们也不能使用$refs了，
在组合API中，使用ref函数来获取dom元素和组件实例
1.获取dom元素
在一个原生标签上加上一个ref属性，
<div ref="dom">dom元素</div>
我们之前说过，这个ref就相当于一个id，
然后在setup中声明一个数据，它的变量名称要和ref一致，要在setup中return这个数据
setup() {
const dom = ref(null)
onMounted(() => {
console.log(dom.value)
})
return {
dom,
}
},
因为setup函数调用的时机比较早，dom元素还有没有渲染到页面上，所以在onMounted回调函数中，我们才能获取dom元素，以上的代码会把dom元素打印出来
有几点需要注意
1.标签中ref的值要和变量名一直
2.使用ref函数声明数据时，参数是null
const dom = ref(null)
3.要在setup中return这个数据
4.要在onMounted以后才能获取到dom元素
2.获取组件实例
用同样的方式我们也可以获取到组件实例，我们来实现一个获取组件实例，并且调用组件方法的功能，
在之前的学习中，我们拿到组件实例以后，就可以直接调用组件methods里的方法，
现在在组合API中，没有methods，所以这种方式是不行的，
要用到setup的第二个参数context的一个方法，expose，就是暴露的意思，向父级组件暴露自己方法或者数据
我们先修改titleBar这个组件，增加一个hide方法，然后通过context.expose暴露出来
setup(props, context) {
const hide = () => { // 定义hide方法
console.log('隐藏方法被调用了')
}
context.expose({ //通过expose暴露出去
hide,
})
},
然后在App.vue中，使用ref获取到titleBar的组件实例，在onMounted方法中调用hide
<titleBar title="页面标题" ref="myTitleBar"></titleBar>
setup() {
const myTitleBar = ref(null) // 1.定义ref数据
onMounted(() => {
myTitleBar.value.hide() // 3.在onMounted中调用组件的方法
})
return {
myTitleBar, // 2.返回ref数据
}
},
我们可以看到控制台打印了
隐藏方法被调用了
说明子组件的方法被正确调用了
这节课我们学习了使用ref获取dom元素和组件实例，并且使用context的expose方法向父级组件暴露方法。
大家一定要自己动手写一写，才能真正掌握。
