Vue中动态绑定Ref（两种方式）

在Vue中，可以使用ref属性来动态绑定DOM元素或组件的引用。以下是两种动态绑定ref的方式：

1. 使用ref属性绑定DOM元素：

<template>
  <div>
    <input ref="inputRef" type="text">
    <button @click="focusInput">Focus Input</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    focusInput() {
      this.$refs.inputRef.focus();
    }
  }
}
</script>

2. 使用ref属性绑定组件实例：

<template>
  <div>
    <my-component ref="myComponentRef"></my-component>
    <button @click="callComponentMethod">Call Component Method</button>
  </div>
</template>
 
<script>
import MyComponent from './MyComponent.vue';
 
export default {
  components: {
    MyComponent
  },
  methods: {
    callComponentMethod() {
      this.$refs.myComponentRef.someMethod();
    }
  }
}
</script>

在上述例子中，第一种方式中ref="inputRef"绑定了一个输入框，然后可以通过this.$refs.inputRef来访问这个DOM元素。第二种方式中ref="myComponentRef"绑定了一个组件，然后可以通过this.$refs.myComponentRef来访问这个组件实例，调用其方法someMethod。