2

@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」の値が変化しません。私は何か間違ったことをしていますか？

4

1 に答える 1

1

はい、そうです。ここにはいくつか問題があります。

  1. このようにvueをインポートする必要がありますimport { Vue, Component, Model, Emit } from 'vue-property-decorator;

  2. クラスには、@Componentこのようなデコレータが必要です

@Component({/* Additional data can go in here */})
export default class MyButton extends Vue {}
  1. これは、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>

上記のように発行されたイベントをリッスンすると、親コンポーネントの順序変数は変更されますが、子は変更されません。

于 2020-02-06T07:07:02.580 に答える