vue 动态绑定 ref

在Vue中，ref可以绑定到组件或DOM元素上，以便在父组件中访问子组件或DOM元素。ref可以通过字符串或者函数的方式进行绑定。如果使用字符串方式进行绑定，则可以直接将ref属性绑定到子组件或者DOM元素上，例如：

<template>
  <div>
    <child-component ref="child"></child-component>
    <input type="text" ref="input">
  </div>
</template>

在这个例子中，ref属性分别绑定到了子组件和input元素上，可以在父组件中使用`this.$refs.child`和`this.$refs.input`来访问它们。

如果使用函数方式进行绑定，则可以在函数中接收子组件或DOM元素的引用，例如：

<template>
  <div>
    <child-component v-bind:ref="setChildRef"></child-component>
    <input type="text" v-bind:ref="setInputRef">
  </div>
</template>

在这个例子中，ref属性分别通过函数方式进行了绑定，`setChildRef`和`setInputRef`是父组件中的方法，可以在这些方法中接收子组件或DOM元素的引用：

methods: {
  setChildRef(ref) {
    this.childRef = ref;
  },
  setInputRef(ref) {
    this.inputRef = ref;
  }
}

在这些方法中，可以将子组件或DOM元素的引用保存到父组件的实例属性中，以便在其他地方使用。需要注意的是，使用函数方式进行绑定时，需要将ref传递给函数，否则父组件将无法访问子组件或DOM元素的引用。