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

Question

我真的对输入元素的“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属性的值等于输入是什么意思？

原文由 edison xue 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

原文由 FitzFish 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

• $refs 用于选择/定位 HTML 元素
• $refs 就像香草 JS 中的 document.querySelector('.el') $('.el')
• $refs 可以在您的 VueJS 实例内部或外部访问。
• $refs 不像 数据属性那样反应。

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

原文由 Michael Manlulu 发布，翻译遵循 CC BY-SA 4.0 许可协议