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属性的值与输入相等的含义是什么？

Answer 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() ...

Answer 2

$refs用于选择/定位HTML元素
$refs类似于vanilla JS中的document.querySelector('.el')或jQuery中的$('.el')
$refs可以在VueJS实例内部或外部访问。
$refs 非反应性。

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

Answer 3

有一个用例，我发现<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in dropdown-custom-width-links" aria-labelledby="appsDropdown" id="appsDropdownPopup"> <h6 class="dropdown-header portfolioCompanyLinksh6"> <span>Quick Shortcut </span><br> User Applications & Reports </h6> <div class="links-float-left-main"> <div *ngIf="enableGrillsDataFeature"> <div class="links-float-left"> <a (click)="onClickGrillsData()" class="dropdown-item" href="javascript:"> <div class="col-md-4-custom">Grills Data</div> </a> </div> </div> <div *ngIf="!portfolioCompanyLinksService.IPOutOfRange"> <div *ngFor="let link of portfolioCompanyLinksService.Links" class="links-float-left"> <a target="_blank" class="dropdown-item" href="{{ link.url }}"> <div *ngIf="link.portfolioCompanyLinkName.svgIcon !=null" [innerHtml]="link.portfolioCompanyLinkName.svgIcon | safePipe: 'html'"></div> <div class="col-md-4-custom">{{ link.linkName }}</div> </a> </div> </div> </div> <div > <div class="links-float-left"> <a class="dropdown-item" (click)="openLink(url)" href="JavaScript:Void(0)" style="cursor: pointer"> <div class="col-md-4-custom">Share via Email</div> </a> </div> </div> </div> </div>属性在Vue组件测试中特别有用。在您的html元素中添加ref属性可以使其在测试中轻松检索（例如ref）。当您不希望添加id或class属性时，这尤其方便，因为它们通常也用于样式设计，例如，如果仅用于标识元素的类已经添加了（或以后）名称，则添加类可能会导致意外的样式用于全局样式表。

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

3 个答案: