Vue3 mini版本实现ref 功能

2024-02-12 08:06:15

Vue3中的ref属性

Vue3中的ref属性是一个非常有用的工具，它允许您访问和操作DOM元素。ref属性可以用于各种场景，包括：

获取元素的引用
更新元素的内容
监听元素的事件

获取元素的引用

ref属性最常见的用途之一是获取元素的引用。这可以通过在元素上使用ref属性来实现，如下所示：

<template>
  <div ref="my-element"></div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.myElement) // 输出: <div ref="my-element"></div>
  }
}
</script>

在上面的示例中，我们使用ref属性获取了div元素的引用。然后，我们可以在mounted钩子中使用this.$refs.myElement来访问该元素。

更新元素的内容

ref属性还可以用于更新元素的内容。这可以通过使用v-model指令来实现，如下所示：

<template>
  <div ref="my-element">{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World'
    }
  },
  mounted() {
    console.log(this.$refs.myElement) // 输出: <div ref="my-element">Hello World</div>
  }
}
</script>

在上面的示例中，我们使用v-model指令将message数据绑定到div元素。然后，我们可以在mounted钩子中使用this.$refs.myElement来访问该元素并输出其内容。

监听元素的事件

ref属性还可以用于监听元素的事件。这可以通过使用@事件处理程序来实现，如下所示：

<template>
  <div ref="my-element" @click="handleClick"></div>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log('The element was clicked!', event)
    }
  },
  mounted() {
    console.log(this.$refs.myElement) // 输出: <div ref="my-element"></div>
  }
}
</script>