vue 3.0 使用ref获取dom元素的示例

使用 ref 获取 DOM 元素是 Vue.js 3.0 新增的功能。下面是使用 ref 获取 DOM 元素的示例：

1. 在模板中使用 ref

在模板中使用 ref 可以方便地获取 DOM 元素及组件实例。下面是一个简单的示例，用于获取一个输入框 (<input>)：

<template>
  <div>
    <input type="text" ref="myInput">
  </div>
</template>

<script>
export default {
  mounted() {
    // 在 mounted 钩子函数中获取输入框
    const input = this.$refs.myInput;
    input.focus();
  }
}
</script>

在 mounted 钩子函数中，通过 this.$refs 获取 ref 属性值为 myInput 的 DOM 元素，然后对其进行操作。在该示例中，我们用 focus() 方法将焦点设置到输入框中。

2. 在组件中使用 ref

在组件中使用 ref 获取组件实例。下面是一个示例，用于重新渲染某个子组件：

<template>
  <div>
    <button @click="refreshChild">重新渲染子组件</button>
    <child-component ref="myChild"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    refreshChild() {
      const child = this.$refs.myChild;
      child.$forceUpdate();
    }
  }
}
</script>

在该示例中，我们通过 import 语句引入了一个名为 ChildComponent 的组件，并在模板中使用了它。我们使用 ref 属性将该组件的实例命名为 myChild。当我们点击“重新渲染子组件”的按钮时，触发 refreshChild 方法，该方法通过 this.$refs 获取 ref 属性值为 myChild 的组件实例，在对其调用 $forceUpdate() 方法，从而重新渲染该组件。

这些是使用 ref 获取 DOM 元素的示例。 ref 在 Vue.js 3.0 中提供了更加灵活的用法，可以方便地获取 DOM 元素及组件实例。