Vue3中操作ref的四种使用方式，从小白到高手！

2023-11-15 05:01:10

Vue3 中的 ref 属性是一种强大的工具，可用于访问和操作 DOM 元素和组件实例。通过ref，您可以直接访问元素或组件的实例，以便对其进行操作或获取信息。

四种使用 Vue3 中 ref 的方式：

1. 使用 ref 属性：

最简单的方法是使用 ref 属性。可以在组件模板中为元素或组件分配一个 ref 属性，然后在组件实例中使用 this.$refs 对象来访问它。

<template>
  <div ref="myDiv">
    Hello World!
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.myDiv) // 输出 <div ref="myDiv">Hello World!</div>
  }
}
</script>

2. 使用 ref 指令：

也可以使用 ref 指令来访问元素或组件实例。ref 指令的语法如下：

<div v-ref:myDiv>
  Hello World!
</div>

在组件实例中，可以通过 this.$refs.myDiv 来访问 ref 指令绑定的元素或组件实例。

3. 使用 createRef 函数：

createRef 函数可以创建一个可变的 ref 对象，该对象可以被多次赋值。这对于需要动态创建或销毁 ref 的情况非常有用。

import { ref } from 'vue'

export default {
  setup() {
    const myRef = ref(null)

    // 在组件实例中，可以通过 myRef.value 来访问元素或组件实例
    return {
      myRef
    }
  }
}

4. 使用 provide/inject：

provide/inject 是一种在祖先组件和子组件之间传递数据的机制。它也可以用于访问 ref 对象。

在祖先组件中，可以使用 provide 函数来提供 ref 对象。

export default {
  setup() {
    const myRef = ref(null)

    // 使用 provide 函数来提供 ref 对象
    provide('myRef', myRef)
  }
}

在子组件中，可以使用 inject 函数来注入 ref 对象。

export default {
  setup() {
    // 使用 inject 函数来注入 ref 对象
    const myRef = inject('myRef')

    // 在组件实例中，可以通过 myRef.value 来访问元素或组件实例
    return {
      myRef
    }
  }
}