Vue3中refs使用方法举例

<template>
  <div ref="myDiv">Hello, Vue 3!</div>
  <button ref="myButton" @click="handleClick">Click me</button>
</template>

<script>
export default {
  mounted() {
    // 通过 this.$refs 访问元素
    const myDiv = this.$refs.myDiv;
    const myButton = this.$refs.myButton;
    console.log(myDiv); // 输出 div DOM 元素
    console.log(myButton); // 输出 button DOM 元素
  },
  methods: {
    handleClick() {
      const myButton = this.$refs.myButton;
      // 在这里可以对 myButton 进行操作
    }
  }
}
</script>

<template>
  <div ref="myDiv">Hello, Vue 3!</div>
  <button @click="handleClick">Click me</button>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    // 使用 ref 函数创建响应式引用
    const myDiv = ref(null);

    // 生命周期钩子在 Composition API 中通过函数实现
    onMounted(() => {
      console.log(myDiv.value); // 输出 div DOM 元素
    });

    // 方法也作为函数返回
    const handleClick = () => {
      console.log(myDiv.value); // 输出 div DOM 元素
      // 在这里可以对 myDiv.value 进行操作
    };

    // 返回需要在模板中使用的响应式引用和方法
    return {
      myDiv,
      handleClick
    };
  }
}
</script>