我如何使用 Typescript 在 VueJs 中使 @Model 和 @Emit 协同工作？

Question

谁能帮我处理@Model 和@Emit 装饰器？我正在尝试更改我的组件中的单击顺序并使用此处的文档：https://github.com/kaorun343/vue-property-decorator。这是我的代码：

<template>
<button @click="onSortClick">Sort</button>
</template>  

<script lang="ts">
import Vue from "vue"; 
import { Emit, Componet, Model } from "vue-property-decorator";

export default class MyButton extends Vue {

    @Model("sort", { type: String, default: "none" }) readonly order!: string;

    @Emit("sort")
    onSortClick() {
        const nextSortOrder = {
                ascending: "descending",
                descending: "none",
                none: "ascending"
        };
        return nextSortOrder[this.order];
    }
}
</script>

但是当我点击按钮时，变量 "order" 的值没有改变。我做错了什么吗？

Answer 1

是的，你是。这里有一些错误。

你需要这样导入vueimport { Vue, Component, Model, Emit } from 'vue-property-decorator;
class 需要有这样的 @Component 装饰器

@Component({/* Additional data can go in here */})
export default class MyButton extends Vue {}

这不是 vue 打算触发事件的方式。您不能更改 order 的值，因为它是同一文件中的 readonly 属性。如果你像这样将按钮放在另一个组件中

// ParentFile.vue

<template>
    <my-button @sort="order = $event"></my-button>
</template>

<script lang="ts">
  import { Component, Vue, Watch } from 'vue-property-decorator';
  import MyButton from '@/components/MyButton.vue';

  @Component({
    components: {
      MyButton
    }
  })
  export default class Home extends Vue {
    order = 'Wow';

    @Watch('order')
    orderChanged(newVal: string) {
      // eslint-disable-next-line no-console
      console.log(newVal); // order will change here
    }
  }
</script>

并像上面那样监听发出的事件，那么父组件中的顺序变量将发生变化，但子组件不会。

我如何使用 Typescript 在 VueJs 中使 @Model 和 @Emit 协同工作？

How I can make @Model and @Emit work together in VueJs with Typescript?

javascript

typescript

vue.js

javascript-decorators