Vue语法汇总

一、this.$refs用法

在 Vue.js 中，this.$refs 是一个对象，它用于直接访问 DOM 元素或子组件的实例。当你给元素或组件添加 ref 属性时，Vue 会自动将这些元素或组件的引用添加到 $refs 对象中。

this.$refs[‘DetailForm’] 这种写法的意思是通过字符串 ‘DetailForm’ 来引用一个特定的元素或组件。这里的方括号 [] 语法允许你使用变量或表达式来动态地指定引用的名字。

例如，如果你有一个表单组件，并且希望在这个组件中通过 ref 引用来调用它的方法或访问其属性，你可以这样做：

<template>
  <div>
    <form ref="nodeDetailForm">
      <!-- 表单内容 -->
    </form>
  </div>
</template>

<script>
export default {
  methods: {
    submitForm() {
      // 假设这个表单组件有一个 validate 方法
      this.$refs['nodeDetailForm'].validate();
    }
  }
}
</script>

在这个例子中，submitForm 方法通过 this.$refs[‘DetailForm’] 访问到了表单组件的实例，并调用了它的 validate 方法。这种方式特别有用，当你的应用需要与具体的 DOM 操作或组件实例进行交互时。

需要注意的是，$refs 只能在组件渲染完成后才能访问到，因此通常在生命周期钩子如 mounted 或者在事件处理函数中使用 $refs 更为合适。