将组件属性传递给Vue Typescript中的对象

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

@Component
export default class MyComponent extends Vue {
  @Prop() propA!: string;
  @Prop() propB!: number;

  myObject = {
    // 定义对象属性，用于接收传递的属性值
    a: this.propA,
    b: this.propB,
  };
}

<template>
  <div>
    <my-component :prop-a="valueA" :prop-b="valueB"></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent,
  },
  data() {
    return {
      valueA: 'Hello',
      valueB: 123,
    };
  },
};
</script>

<template>
  <div>
    <p>propA: {{ myObject.a }}</p>
    <p>propB: {{ myObject.b }}</p>
  </div>
</template>

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

@Component
export default class MyComponent extends Vue {
  myObject = {
    a: '',
    b: 0,
  };

  mounted() {
    // 在mounted钩子函数中，可以访问传递的属性值
    this.myObject.a = this.propA;
    this.myObject.b = this.propB;
  }
}
</script>