我们在之前学习过获取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方法向父级组件暴露方法。
大家一定要自己动手写一写，才能真正掌握。