Question

我有一个transfer.vue组件，如下所示。

<template>
    <transfer-panel ref="leftPanel">
    </transfer-panel>
</template>
        
<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import TransferPanel from './Transfer-Panel.vue';
        
    @Component({
        components: {
            TransferPanel
        }
    })
    export default class Transfer extends Vue {
        
        clearQuery(which: string) {
            (this.$refs.leftPanel as TransferPanel).query = ''; // Here it shows error.
        }
        
}
</script>

使用transfer-panel.vue组件，其定义如下。

<template>
    <div class="dummy-div">
    </div>
</template>

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

@Component({})
export default class TransferPanel extends Vue {
  query = '';
}

但在下一行（在transfer.vue组件中提到）

(this.$refs.leftPanel as TransferPanel).query = '';

显示错误如下。怎么了？

类型“ Vue”上不存在属性“查询”

Answer 1

将此行添加到您的transfer.vue文件中

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import TransferPanel from './Transfer-Panel.vue';
        
    @Component({
        components: {
            TransferPanel
        }
    })
    export default class Transfer extends Vue {
      ...
      $refs!: {
        leftPanel: TransferPanel // TransferPanel interface should have query as a property
      }
      ...
    }
</script

类型“ Vue”上不存在属性“查询”

1 个答案: