Vue.js打字稿this。$ refs。<refField> .value不存在

Question

用打字稿重写VueJs项目时，遇到了TypeScript错误。

这是具有自定义v模型的组件的一部分。

html中的输入字段具有一个称为“ plate”的引用，我想访问该值。该字段上的@input调用下面编写的update方法。

打字稿抱怨板上没有价值。

@Prop() value: any;

update() {
    this.$emit('input',
        plate: this.$refs.plate.value
    });
}

模板：

<template>  
<div>
    <div class="form-group">
        <label for="inputPlate" class="col-sm-2 control-label">Plate</label>

        <div class="col-sm-10">
            <input type="text" class="form-control" id="inputPlate" ref="plate" :value="value.plate" @input="update">
        </div>
    </div>

</div>
</template>

Answer 1

编辑 - 2021-03（组合 API）

更新此答案是因为 Vue 3（或组合 API 插件，如果您使用的是 Vue 2）具有一些新功能。

<template>
  <div ref="root">This is a root element</div>
</template>

<script lang="ts">
  import { ref, onMounted, defineComponent } from '@vue/composition-api'

  export default defineComponent({
    setup() {
      const root = ref(null)

      onMounted(() => {
        // the DOM element will be assigned to the ref after initial render
        console.log(root.value) // <div>This is a root element</div>
      })

      return {
        root
      }
    }
  })
</script>

编辑 - 2020-04：

该vue-property-decorator库提供了我推荐的@Ref而不是我的原始答案。

<template>
  <div ref="root">This is a root element</div>
</template>

<script lang="ts">
  import { ref, onMounted, defineComponent } from '@vue/composition-api'

  export default defineComponent({
    setup() {
      const root = ref(null)

      onMounted(() => {
        // the DOM element will be assigned to the ref after initial render
        console.log(root.value) // <div>This is a root element</div>
      })

      return {
        root
      }
    }
  })
</script>

原答案

以上答案都不适用于我想要做的事情。添加以下 $refs 属性结束修复它并似乎恢复了预期的属性。我在这个 github 帖子上找到了链接的解决方案。

import { Vue, Component, Ref } from 'vue-property-decorator'

import AnotherComponent from '@/path/to/another-component.vue'

@Component
export default class YourComponent extends Vue {
  @Ref() readonly anotherComponent!: AnotherComponent
  @Ref('aButton') readonly button!: HTMLButtonElement
}

Answer 2

你可以这样做：

class YourComponent extends Vue {
  $refs: {
    checkboxElement: HTMLFormElement
  }

  someMethod () {
    this.$refs.checkboxElement.checked
  }
}

从此问题开始：https : //github.com/vuejs/vue-class-component/issues/94

Answer 3

这对我有用：使用 (this.$refs.<refField> as any).value或(this.$refs.['refField'] as any).value

Answer 4

避免使用括号< >进行类型转换，因为它会与 JSX 冲突。

试试这个

update() {
    const plateElement = this.$refs.plate as HTMLInputElement
    this.$emit('input', { plate: plateElement.value });
}

作为我一直牢记的笔记

Typescript 只是具有强大打字能力的 Javascript，以确保类型安全。因此^（通常）它不会预测 X 的类型（var、param 等），也不会自动对任何操作进行类型转换。

此外，打字稿的另一个目的是使 JS 代码变得更清晰/可读，因此尽可能定义类型。

Answer 5

儿子.vue

const Son = Vue.extend({
  components: {},
  props: {},
  methods: {
    help(){}
  }
  ...
})
export type SonRef = InstanceType<typeof Son>;
export default Son;

父.vue

<son ref="son" />

computed: {
  son(): SonRef {
    return this.$refs.son as SonRef;
  }
}

//use
this.son.help();