$refs:
$refs是一個能夠直接訪問子元件或 DOM 元素的方法。
也就是說，它是一個通道，可以讓我們在程式中輕鬆地操作子元件或 DOM 元素。

現在，來看一個簡單的例子。假設有一個父層元件叫做App.vue，裡面包含了一個子元件ChildComponent.vue。
我們想要在父層元件中取得子元件中的某個 DOM 元素，然後做一些操作。

首先，在ChildComponent.vue中，我們可以這樣寫：

<template>
  <div ref="myElement">我是子元件裡面的一個元素</div>
</template>

這裡，我們在div元素上加了一個ref，這個ref的值是myElement，這樣就可以在程式中使用這個ref來取得這個元素。

接著，在App.vue中，我們可以這樣使用$refs：

<template>
  <div>
    <ChildComponent ref="childComponent" />
    <button @click="handleClick">點我操作子元件的元素</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleClick() {
      const element = this.$refs.childComponent.$refs.myElement;
      element.style.color = 'red';
    }
  }
}
</script>

這裡，我們首先在父層元件中引入了ChildComponent，然後在模板中使用了它。並且在button上綁定了一個click事件，當按鈕被點擊時，就會呼叫handleClick這個方法。

在handleClick方法中，使用了this.$refs.childComponent.$refs.myElement來取得子元件中想要的那個元素，然後就可以在程式中對它進行操作了。
這裡將它的文字顏色改成了紅色。

$refs 和 $emit的差別:
1.$refs:
用途：$refs 用於在父層元件中直接訪問子元件或 DOM 元素。
作用：提供了一個直接的方式來操作子元件或 DOM 元素，不需要經過事件的觸發。
2.$emit:
用途：$emit 用於子元件向父層元件傳遞消息或事件。
作用：提供了一個事件觸發的機制，讓子元件可以告訴父層元件發生了某個事件，並可以傳遞相關的資訊。