VUE の基本:visible.sync-modal ボックスの表示が非表示になり、elementUI ダイアログ コンポーネントがエラーを報告するか、visible 属性が有効になりません
この文書は下書きとして2年間保管されていましたが、最近になってようやく引っ張り出して完成させる時間ができました。。。。
私たちは日々の開発で :visible.sync 修飾子によく遭遇します。特に elementUI を使用する場合、el-dialog コンポーネントが :visible.sync を使用しない場合、クレイジーなエラー報告などの予期せぬ問題が発生します ~~ ～
シーン:
子コンポーネントを参照する親コンポーネント
<child-dialog :visible="visible"></child-dialog>
サブコンポーネントはダイアログです。
親コンポーネントは props–visible: true/false を渡して、ダイアログの開閉を制御します。
子コンポーネントには閉じるボタン、ボタン バインド メソッドがあります。
close(){this.visible = false}
閉じるボタンをクリックするとエラー警告が表示されます
親コンポーネントが再レンダリングされるたびに値が上書きされるため、プロップを直接変更することは避けてください。代わりに、プロパティの値に基づいてデータまたは計算されたプロパティを使用します。変更されるプロップ: 「可視」
解決：
1. サブコンポーネントのボタンのバインド方法を次のように変更します。
close(){
// this.visible = false 删除这一行代码
this.$emit('update:visible', false)
}
2. 親コンポーネントを変更する
<child-dialog :visible.sync="visible"></child-dialog>
終わった〜
これは次の理由から行われます。
1.visible.sync構文糖衣の簡単な紹介
<child-dialog :visible.sync="visible"></child-dialog>
等同于
<child-dialog :visible="visible" @update:visible="val => visible = val"></child-dialog>
2. VUE では、prop の転送は親から子への片方向伝達であり、終了イベントはサブコンポーネント内にありますが、一般にサブコンポーネント間の通信を実現するには this.$emit が必要です。 -component と親コンポーネント。
3. sync コマンドは、visible の親子同期を実現するために、親コンポーネントに記述された update を実際に呼び出します。親コンポーネントはvisible を初期化し、子コンポーネントは close イベントを呼び出し、親コンポーネントの更新をトリガーします。
4. 双方向バインディング v-modal は親コンポーネントの入力イベントをトリガーし、.sync は親コンポーネントの更新イベントをトリガーします。