VueでのProps(可変状態)

たんほうこうデータストリーム
すべてのpropは、親子propの間に一方向の下りバインドを形成します.親propの更新はサブコンポーネントに下に流れますが、逆にはできません.これにより、サブコンポーネントから親コンポーネントの状態が意外に変化することを防止し、アプリケーションのデータの流れが理解しにくくなります.
さらに、親コンポーネントが更新されるたびに、サブコンポーネント内のすべてのpropが最新の値にリフレッシュされます.これは、サブコンポーネントの内部でpropを変更するべきではないことを意味します.そうすれば、Vueはブラウザのコンソールで警告します.
に質問
上で発生した警告現象を簡単に述べると、多くの人が遭遇したことがあるかもしれません.
シーンの操作
親コンポーネント

<BackLogModal :isModalOpen="isModalOpen" @closeModal="handleCloseModal"></BackLogModal>

BackLogModalは1つの弾窓組立体である、isModalOpenによって弾窓の開閉状態

が決定される.

から入力isModalOpenは親コンポーネントの変数であり、タイプはboolean

である.

closeModalサブアセンブリから送信されたカスタムイベントcloseModal

を傍受する.
サブアセンブリ

//    typescript
export default class BackLogModal extends Vue {
    @Prop()
    private isModalOpen: boolean;

    private handleConfirm(): void {
        this.$Message.info('Clicked ok');
        this.$emit('closeModal');
    }

    private handleClose(): void {
        this.$Message.info('Clicked cancal');
        this.$emit('closeModal');
    }
}

親コンポーネントから渡された@Prop()属性

は、isModalOpen注記によって取得する.

ページは、v-modelを介して属性isModalOpenにバインド

である.

は、ポップアップモジュールが閉じると自動的にisModalOpenの値がfalseに設定されるため、ここで直接修正するのが親アセンブリからのisModalOpen属性であり、props属性は一方向データストリームであり、可変状態を有するため、警告

がページから投げ出される.
問題を解決する

export default class BackLogModal extends Vue {
    private isOpen: boolean = false;

    @Prop()
    private isModalOpen: boolean;

    @Watch('isModalOpen')
    private watchModalOpen(newVal: boolean, oldVal: boolean) {
        console.log(newVal, oldVal);
        if (newVal !== oldVal) {
            this.isOpen = newVal;
        }
    }

    private handleConfirm(): void {
        this.$Message.info('Clicked ok');
        this.$emit('closeModal');
    }

    private handleClose(): void {
        this.$Message.info('Clicked cancal');
        this.$emit('closeModal');
    }
}

サブアセンブリプライベート変数isOpenとページポップアップ行バインド

を定義する.

は、@Watch('isModalOpen')を使用して親コンポーネントから受信isModalOpenの属性を監視し、値が変更されると、ローカル変数isOpenを更新し、弾窓の正常な開閉

を確保する.