vue prop双方向バインドの実現

vueは一方向データストリームであることはよく知られているため、親コンポーネントがpropを介してサブコンポーネントに伝達される値を直接変更することは一般的ではない.強引に修正すれば、次の警告メッセージはきっと見慣れないでしょう.[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value.
しかし、実際の開発ではpropを双方向にバインドする必要がある場合がよくあります.最も一般的なアプリケーションシーンはdialogボックスです.閉じるボタンをクリックすると、親コンポーネントからの制御dialogの表示または非表示のprop値を変更する必要があります.
解決策:.sync修飾子ドキュメントリファレンスを使用
例を挙げます.
親コンポーネント:

<father :isShow.sync = 'isShow'>father>

実際上の:isShow.syncは:update:isShowの略です
サブアセンブリ:

<template>
  <div class="child" v-if="isShow">
    <div>     div>
    <div class="closeBtn" @click = "close">      div>
  <div>
template>
<script>
export default {
  props: ['isShow'],
  methods: {
      close(){
         this.$emit("update:isShow", false);
      }
  }
}
script>

this.$emit("update:isShow", false);によってpropの新しい値を親コンポーネントに渡すことによって、簡単なpropの双方向バインドが実現される.
この方法に加えて、dataに新しい変数を宣言してpropを格納し、watchでpropの変更を傍受し、属性を計算することでpropの値を動的に変更することもできます.
転載先:https://juejin.im/post/5c413a5bf265da613572d4e6