vue ref是干什么用的

Vue的ref属性是用来在Vue组件中获取DOM元素或组件实例的引用。

通常情况下，Vue会使用虚拟DOM来管理和更新页面上的元素。但有时我们可能需要直接操作或访问特定的DOM元素，例如调用某个DOM元素的方法或修改其样式。这时就可以使用ref属性来获得对该DOM元素的引用。

在Vue的模板中，我们可以使用v-bind指令将ref属性绑定到一个变量上。然后，在Vue实例的代码中，就可以通过this.$refs来访问到这个变量所引用的DOM元素或组件实例了。

使用ref属性可以做很多事情，例如：

1. 直接操作DOM元素：通过ref属性，我们可以直接获取到DOM元素，然后调用其方法或修改其样式。

2. 访问子组件实例：如果在父组件中需要直接访问子组件的方法或数据，可以通过ref属性来获取子组件的实例。

3. 验证表单：在验证表单时，我们可以使用ref属性来获取表单元素的引用，然后调用其方法来进行表单验证。

需要注意的是，ref属性只能在Vue组件中使用，而且不能在v-for循环中使用。此外，当在组件的根元素上使用ref属性时，获取到的是组件实例；当在其他元素上使用ref属性时，获取到的是DOM元素。

Vue ref是用来获取DOM元素或组件实例的引用的。它允许你在Vue组件中直接操作DOM元素或子组件的实例。

1. 获取DOM元素：当在模板中使用ref指令时，Vue会在组件创建和更新时，将ref指定的DOM元素赋值给组件实例上的一个属性。通过这个属性可以直接访问和操作DOM元素，而不需要通过getElementById等原生DOM操作方法来获取元素。

例子：

<template>
  <div>
    <input type="text" ref="myInput" />
    <button @click="focusInput">Focus Input</button>
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
      this.$refs.myInput.focus();
    }
  }
}
</script>

通过ref指令，将input元素赋值给组件实例上的myInput属性，然后就可以在方法中通过this.$refs.myInput来操作该input元素。

2. 获取子组件实例：除了可以获取DOM元素，ref还可以在父组件中获取子组件的实例。当在子组件上使用ref时，Vue会将子组件实例赋值给父组件实例的一个属性。通过这个属性可以直接访问和操作子组件的属性和方法。

例子：

<template>
  <div>
    <child-component ref="myChild"></child-component>
    <button @click="getChildData">Get Child Data</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    getChildData() {
      const childData = this.$refs.myChild.getData();
      console.log(childData);
    }
  }
}
</script>

通过ref指令，将子组件ChildComponent的实例赋值给父组件实例上的myChild属性，然后就可以在父组件中调用子组件的方法和访问子组件的属性。

3. 动态引用：ref也支持动态引用，可以使用v-for指令和ref来动态创建多个ref引用。

例子：

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <input type="text" :ref="`myInput-${item.id}`" />
    </div>
    <button @click="focusInput(1)">Focus Input 1</button>
    <button @click="focusInput(2)">Focus Input 2</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1 },
        { id: 2 }
      ]
    }
  },
  methods: {
    focusInput(id) {
      this.$refs[`myInput-${id}`].focus();
    }
  }
}
</script>

通过动态绑定ref，根据item的id来创建对应的ref引用。然后就可以通过this.$refs[myInput-${id}]来操作对应的input元素。

4. 访问组件实例：在一些特殊情况下，可能需要直接访问组件实例。ref可以通过$refs来访问组件实例。

例子：

<template>
  <div>
    <child-component ref="myChild"></child-component>
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.myChild.childMethod();
    }
  }
}
</script>

通过ref指令，将子组件ChildComponent的实例赋值给$refs对象的myChild属性，然后就可以通过this.$refs.myChild来访问和调用子组件的方法。

5. 注意事项：需要注意的是，ref只在组件渲染完成后才会更新，所以如果在组件的created或mounted钩子中去访问ref，可能会获取到undefined。如果需要获取到可用的引用，可以使用Vue的nextTick方法。

例子：

<template>
  <div>
    <div v-if="show">
      <input type="text" ref="myInput" />
    </div>
    <button @click="show = !show">Toggle Input</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      // 在下次DOM更新循环结束之后执行
      console.log(this.$refs.myInput); // 获取到正确的引用
    })
  }
}
</script>

在mounted钩子中通过nextTick方法去访问ref，可以确保获取到正确的引用。
以上是Vue ref的用法和注意事项的总结，通过ref可以方便地获取DOM元素或组件的引用，实现更灵活的操作。

Vue的ref是用于给Vue实例中的DOM元素或子组件注册引用的方法。通过ref属性，可以在Vue组件中访问到子组件或DOM元素，从而进行操作或获取信息。ref有两种使用方式，分别是在普通DOM元素上使用和在子组件上使用。

使用ref访问DOM元素：
在HTML模板中，可以在标签上使用v-ref或ref属性来注册DOM元素的引用，例如：

<template>
  <div>
    <button ref="myButton">Click Me</button>
  </div>
</template>

在Vue实例中，可以使用this.$refs来访问注册的DOM元素的引用：

<script>
export default {
  mounted() {
    const button = this.$refs.myButton;
    button.innerText = "Click Me Again";
  }
}
</script>

上述代码中，mounted生命周期钩子函数在Vue实例初始化完成后执行，此时可以通过this.$refs来访问DOM元素的引用，并修改其innerText属性。

使用ref访问子组件：
可以在子组件上使用ref属性注册组件的引用，例如：

<template>
  <div>
    <my-component ref="myComponent"></my-component>
  </div>
</template>

在父组件的Vue实例中，可以通过this.$refs来访问注册的子组件的引用：

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

export default {
  components: {
    MyComponent
  },
  mounted() {
    const myComponent = this.$refs.myComponent;
    myComponent.doSomething();
  }
}
</script>

上述代码中，通过在父组件的Vue实例中注册子组件的引用，可以在mounted生命周期钩子函数中通过this.$refs来访问子组件的引用，并调用其方法。

需要注意的是，如果ref被用在了v-for指令所在的DOM元素上，$refs将会是一个包含这些DOM元素的数组。

总结：
Vue的ref是一个用于注册子组件或DOM元素引用的方法。通过ref属性可以在Vue组件中访问到子组件或DOM元素，并对其进行操作或获取信息。使用ref访问DOM元素时，在HTML模板中使用v-ref或ref属性给DOM元素注册引用，在Vue实例中使用this.$refs来访问DOM元素的引用。使用ref访问子组件时，在子组件标签上使用ref属性注册组件的引用，在父组件的Vue实例中使用this.$refs来访问子组件的引用。