Vue 3 + Typescript -如何查看类属性

4ktjp1zp 于 2022-12-30 发布在 TypeScript

关注(0)|答案(2)|浏览(204)

我最近开始使用Vue 3的CLI with Typescript进行一个项目，注意到“vue-class-component”有很大的不同。事实上，我不确定这个项目是否真的兼容最新的Vue 3功能。
我发现了这两条线索：https://github.com/vuejs/vue-class-component/issues/406和https://github.com/vuejs/vue-class-component/issues/406#issuecomment-745490016，所以我不确定“vue-class-component”是否是这些天要走的路。
目前，我正试图弄清楚如何观察一个属性传递给一个组件，但没有像@Watch或@Prop这样的东西可用了。
有人能提供一个如何做到这一点的例子吗？
下面是一个代码片段，我想知道如何查看msg属性值：

<script lang="ts">
import { Options, Vue } from "vue-class-component";

@Options({
  props: {
    msg: String,
  },
})
export default class HelloWorld extends Vue {
  msg!: string;

}
</script>

非常感谢

typescript

来源：https://stackoverflow.com/questions/69983325/vue-3-typescript-how-to-watch-a-class-property

2条答案

按热度按时间

ru9i0ody1#

对于Vue 2，您将使用vue-property-decorator
对于Vue 3 --目前--您可以使用vue-facing-decorator，它具有完整的装饰器实现。
两个存储库的用法相似：

// import { Prop, Watch, Component, Vue } from " vue-property-decorator"; // Vue2
import { Prop, Watch, Component, Vue } from "vue-facing-decorator"; // Vue3

@Component
export default class HelloWorld extends Vue {
  @Prop
    msg: string
  
  @Watch('msg')
  methodName (newMsg: string, oldMsg: string) {
    console.log(`msg just changed from ${oldMsg} to ${newMsg}`);
  }
}

编辑：vue-property-decorator最近开始支持Vue 3，目前有一个候选版本：npm install vue-property-decorator@10.0.0-rc.3，以后的版本可能会更稳定。

赞(0）回复(0）举报 2022-12-30

ryevplcw2#

我们使用vue-property-decorator包，它工作得非常好。
https://github.com/kaorun343/vue-property-decorator#Watch
编辑：我刚刚看到你正在使用Vue 3，我很确定它是否被支持。我仍然不会删除这个答案，因为它可能会帮助你或其他人。
干杯

赞(0）回复(0）举报 2022-12-30

我来回答

Vue 3 + Typescript -如何查看类属性

2条答案

相关问题

热门标签

最新问答