'ref' 属性的真正目的是什么？答案

【问题标题】：what's the real purpose of 'ref' attribute?'ref' 属性的真正目的是什么？
【发布时间】：2017-10-19 04:53:18
【问题描述】：

我真的对输入元素的“ref”属性感到困惑。根据我的了解，没听说过，也找不到一些有意义的资料。代码在vue.js官方文档中。

<currency-input v-model="price"></currency-input>

这是关于组件的代码：

Vue.component('currency-input', {
  template: `
    <span>
      $
      <input
        ref="input"
        v-bind:value="value"
        v-on:input="updateValue($event.target.value)">
    </span>
  `,
  props: ['value'],

ref属性的值等于input是什么意思？

【问题讨论】：

ref 代表参考:)

标签： vue.js

【解决方案1】：

ref 属性的主要目的是通过作为父 $refs 属性中的键来使 DOM 元素可选择。

例如，您的输入元素带有ref="input"，将在其父元素中（此处在货币输入this 中）公开其DOM 节点，如this.$refs["input"]（或this.$refs.input）。

见：https://vuejs.org/v2/api/#ref

它有几个用例，即使在可能的情况下不直接操作 DOM 通常会更好。例如，这里的一个合法用例是将焦点放在此输入上：为此，您可以在组件的方法中使用 this.$refs["input"].focus()...

【讨论】：

或更简单的this.$refs.input.focus()

【解决方案2】：

$refs 用于选择/定位 HTML 元素
$refs 类似于原版 JS 中的 document.querySelector('.el') 或 jQuery 中的 $('.el')
$refs 可以在您的 VueJS 实例内部或外部访问。
$refs NOT REACTIVE与数据属性不同。

因此，当您想要监听/操作/更改未连接/控制到任何 Vue 实例属性的元素的值以避免冲突时，建议使用$refs。

【讨论】：

【解决方案3】：

我发现ref 属性在 Vue 组件测试中特别有用的一个用例。将ref 属性添加到您的 html 元素可以在测试中轻松检索它（例如const fooRef = wrapper.find({ ref: 'foo' })）。当您不想添加 id 或 class 属性时，这特别方便，因为它们通常也用于样式目的，例如，如果这些名称已经（或稍后）被添加，则添加仅用于标识元素的类可能会导致意外样式用于全局样式表。

【讨论】：

【解决方案4】：

$refs 仅在组件渲染后才会填充。它仅作为直接子操作的逃生舱口 - 您应该避免从模板或计算属性中访问 $refs。

参考 - https://v3.vuejs.org/guide/component-template-refs.html

【讨论】：