Question

在打字稿中重写我的VueJs项目时，我遇到了TypeScript错误。

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

html中的输入字段有一个名为'plate'的引用，我想访问它的值。该字段上的@input调用下面写的更新方法。

Typescript抱怨板上不存在价值。

@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

你可以这样做：

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

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

来自此问题：https://github.com/vuejs/vue-class-component/issues/94

Answer 2

son.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();

Answer 3

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

试试这个

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

作为一个记录，我一直记得

Typescript只是具有强大打字功能的Javascript，可确保类型安全。所以^（通常）它不会预测X的类型（var，param等）自动类型化任何操作。

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

Answer 4

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

Answer 5

也许对某人有用。它看起来更漂亮，并保持类型支持。

HTML：

<input ref="inputComment" v-model="inputComment">

TS：

const inputValue = ((this.$refs.inputComment as Vue).$el as HTMLInputElement).value;

Answer 6

如果调用自定义组件方法，

我们可以键入该组件的名称，因此很容易引用该方法。

例如

(this.$refs.annotator as AnnotatorComponent).saveObjects();

其中AnnotatorComponent是基于类的vue组件，如下所示。

@Component
export default class AnnotatorComponent extends Vue {
    public saveObjects() {
        // Custom code
    }
}

Answer 7

我找到了一种让它发挥作用的方法，但在我看来它很难看。

随意提供其他/更好的建议。

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

Answer 8

以上答案均不适用于我想做的事情。添加以下$ refs属性可以修复该问题，并且似乎可以恢复预期的属性。我发现该解决方案链接到this github post.

class YourComponent extends Vue {
  $refs!: {
    vue: Vue,
    element: HTMLInputElement,
    vues: Vue[],
    elements: HTMLInputElement[]
  }

  someMethod () {
    this.$refs.<element>.<attribute>
  }
}

Answer 9

如果您要将现有的 Vue.extend() 项目从 js 转换为 ts 并希望保留旧格式，请确保使用 vue 包装导出。

之前：

<script lang="ts">

export default {
  mounted() {
    let element = this.$refs.graph;

...

之后：

<script lang="ts">

import Vue from "vue";

export default Vue.extend({
  mounted() {
    let element = this.$refs.graph;

...

Vuejs打字本。$ refs。<reffield> .value不存在

9 个答案: