vue3怎么使用$refs和$emit这些方法

在 Vue 3 中，使用 $refs 和 $emit 的方法与 Vue 2 中基本相同。

1. $refs

使用 $refs 可以访问组件或元素的属性和方法。在 Vue 3 中，你可以使用 `ref` 指令来声明一个引用，然后在组件中使用 `$refs` 来引用它。

例如，你可以这样声明一个 `div` 的引用：

<template>
  <div ref="myDiv"></div>
</template>

然后在组件中可以这样使用：

<script>
export default {
  mounted() {
    this.$refs.myDiv.style.backgroundColor = 'red';
  }
}
</script>

2. $emit

使用 $emit 可以在组件之间传递事件和数据。在 Vue 3 中，你可以使用 `emits` 选项来声明一个组件可以发出的事件。

例如，你可以在组件中这样声明：

<script>
export default {
  emits: ['my-event'],
  methods: {
    handleClick() {
      this.$emit('my-event', 'hello world');
    }
  }
}
</script>

然后在父组件中监听这个事件：

<template>
  <my-component @my-event="handleEvent"></my-component>
</template>

<script>
export default {
  methods: {
    handleEvent(data) {
      console.log(data); // 'hello world'
    }
  }
}
</script>

注意：在 Vue 3 中，如果你的组件使用了 `emits` 选项声明了可以发出的事件，那么在模板中使用这个组件时，你必须使用 `v-on:` 前缀来监听事件，而不能使用 `@`。例如：

<my-component v-on:my-event="handleEvent"></my-component>