vue3怎么用this.$refs

在Vue3中，你可以使用`this.$refs`来引用组件实例或者DOM元素。通过给DOM元素或者组件添加`ref`属性，你可以在组件中使用`this.$refs`来获取对应的引用。

例如，如果你想要引用一个DOM元素，你可以这样操作：

<h3 ref="myh3">MyRef</h3>
<button @click="getRef">获取对$refs的引用</button>

在方法中，你可以通过`this.$refs.引用的名称`来获取DOM元素的引用：

methods: {
  getRef() {
    console.log(this.$refs.myh3);
    // 操作DOM元素，比如将文本颜色改为红色
    this.$refs.myh3.style.color = 'red';
  }
}

如果你想要引用一个组件实例，你可以这样操作：

<template>
  <h3>MyRef组件</h3>
  <button @click="getRef">获取$refs引用</button>
</template>

<script>
export default {
  methods: {
    getRef() {
      console.log(this.$refs);
      // 通过this.$refs.引用的名称，可以获取组件实例的引用
    }
  }
}
</script>

相关问题

vue3 中没有this.$refs

在Vue 3中，通过使用Composition API，this.$refs已经被移除了。Composition API提供了一种更灵活的方式来引用DOM元素或组件实例。现在可以使用ref函数来创建一个响应式引用，然后通过调用.value属性来访问引用的值。例如，可以使用ref函数创建一个DOM元素的引用，并通过访问.value属性来获取该DOM元素。相应地，可以使用ref函数创建一个组件实例的引用，并通过访问.value属性来获取该组件实例。

vue watch this.$refs

根据提供的引用内容，这段代码是一个Vue组件中的watch监听器，用于监听父组件传递给子组件的visible属性的变化。当visible属性发生变化时，会触发watch监听器中的回调函数，将visible属性的值赋给visible2属性，并调用init()方法。在init()方法中，使用$nextTick()方法获取组件中的$refs属性，根据type属性的不同，分别调用graphNode和graphLink组件中的init()方法。

因此，这段代码的作用是在Vue组件中监听visible属性的变化，并在visible属性发生变化时，根据type属性的不同调用不同组件中的init()方法。

代码示例：

watch: {
  visible(i1, i2) {
    this.visible2 = i1
    if (i1) {
      this.init()
    }
  },
},
methods: {
  init() {
    this.$nextTick(() => {
      console.log(this.$refs) // 输出组件中的$refs属性
    })
  }
}