vue 模板ref绑定变量

vue 的模板 ref 可以用来在 html 模板中绑定一个变量。通过 ref，我们可以在 vue 的组件实例中访问到对应的 DOM 元素或子组件实例。具体来说，可以通过 this.$refs.变量名 来引用模板中 ref 绑定的元素或组件。

在使用 ref 绑定变量前，我们需要先定义 ref。假设我们有一个需要绑定的 input 输入框，我们可以在模板中的 input 标签中添加 ref 属性：

<input ref="inputRef" type="text">

这样，在 vue 实例中，就可以通过 this.$refs.inputRef 来访问这个 input 元素了。我们可以在 vue 实例的方法中获取或修改这个元素的属性或值：

methods: {
  getInputValue() {
    const value = this.$refs.inputRef.value;
    console.log(value);
  },
  setInputValue() {
    this.$refs.inputRef.value = 'Hello World';
  }
}

通过调用 getInputValue 方法，我们可以获取到 input 输入框的值，并在控制台打印出来。而调用 setInputValue 方法，则可以将 input 输入框的值改为 'Hello World'。

需要注意的是，ref 绑定的元素或组件在 vue 实例创建之后才能访问到。所以，如果需要在实例创建之前就访问到 ref，可以将访问 ref 的操作放在 mounted 函数或其他合适的生命周期钩子函数中。

总结而言，通过 ref 绑定变量，可以在 vue 实例中访问到模板中的元素或组件，进而操作它们的属性或值。这为我们处理 DOM 操作提供了更方便的方式。