Question

我有一个地址模型类，其中定义了一种返回完整街道的方法（结合了地址模型上两个单独的属性）。现在，我想通过道具将这样的对象传递给组件，并使用整条街道方法来显示它。

不幸的是，由于模板中无法识别方法调用，因此该组件似乎丢失了对象的类型。

是否可以在模板中使用方法？

下面是一些简化的代码：

父组件：

<template>
  <div>
     <AddressDisplay v-bind:address="AddressModel = { street: 'Bleeker', streetNr: '1' }" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import AddressDisplay from '@/components/AddressDisplay.vue';

export default Vue.extend({
  components: { AddressDisplay },
});
</script>

子组件：

<template>
  <div>
    {{ address.fullStreet }}
  </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  props: {
    address: { type: Object, required: true },
  },
  created() {
    console.log(this.address.type);
  },
});
</script>

模型的类型定义：

class AddressModel implements Model {
  street = '';
  streetNr = '';

  get fullStreet(): string {
    return this.street + ' ' + this.streetNr;
  }
}

发生了什么：什么都没有！没有错误信息，但是什么也没有显示。控制台打印类型为“未定义”。

Answer 1

为什么要这样写：v-bind:address="AddressModel = { street: 'Bleeker', streetNr: '1' }"？你能指望什么？尤其是当您甚至不导入“ AddressModel”时。看一下示例https://class-component.vuejs.org/guide/class-component.html#data

这可能会起作用：

<template>
  <div>
     <AddressDisplay v-bind:address="address" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import AddressDisplay from '@/components/AddressDisplay.vue';

export default Vue.extend({
  components: { AddressDisplay },
  data(){ return {
   address: { street: 'Bleeker', streetNr: '1' }
  }}
});
</script>

如何访问通过道具传递给组件的对象的方法

1 个答案: