Vue中父组件向子组件传值无法响应props的变化

父组件：

<template>    
        <q-btn
          round
          color="pink-4"
          size="0.9em"
          text-color="white"
          dense
          icon="add"
          @click="addYunpanItem"
        />
    <wysisyg-editor  :is-editor-show="isEditorShowing" />
</template>
<script>
export default {
  components: { LoginQr, WysisygEditor },
  name: 'YunpanLayout',

  data() {
    return {
      isEditorShowing: false,
    };
  },
  methods: {

    addYunpanItem() {
      console.log('this isEditorShowing is ' + this.isEditorShowing);
      this.isEditorShowing = true;
    },
 }
</script>

子组件：

<template>
  <q-dialog v-model="isEditorShow" @hide="dialogHide">
    <q-card class="full-width YL__editor_card">
      <q-bar>
        <q-space />
        <q-btn dense flat icon="close" v-close-popup>
          <q-tooltip>Close</q-tooltip>
        </q-btn>
      </q-bar>
    </q-card>
  </q-dialog>
</template>
<style lang="sass">
.YL
  &__editor_card
    @media(min-width: $breakpoint-xs-max)
      width: 600px
</style>
<script>
export default {
  name: 'WysisygEditor',
  data() {
    return { post: { body: '' } };
  },

  props: ['isEditorShow'], // 微信auth code

  mounted() {
    console.log('WysisygEditor is mounted');
  },

  methods: {
    dialogHide() {},
  },
};
</script>

其中子组件的props isEditorShow控制子组件的显示，但是只有第一次点击按钮时this.isEditorShowing=true时才显示，第二次点击就不行了。我觉的可能是第一次点击this.isEditorShowing由false变成true，子组件重新渲染。但把dialog隐藏时只是子组件prop isEditorShow变回了false，父组件的isEditorShowing还是true，所以第二次点击时由于isEditorShowing已经是true,所以子组件没有重新渲染。所以就失效了。所以当子组件dialog隐藏时，需要把父组件的isEditorShowing设为false。

改成下面代码：

父组件：

<template>
        <q-btn
          round
          color="pink-4"
          size="0.9em"
          text-color="white"
          dense
          icon="add"
          @click="addYunpanItem"
        />
      </q-toolbar>
    <wysisyg-editor @editor-show-changed="editorShowChanged" :is-editor-show="isEditorShowing" />

</template>

<script>

export default {
  components: { LoginQr, WysisygEditor },
  name: 'YunpanLayout',

  data() {
    return {
      isEditorShowing: false,
    };
  },

  methods: {
    addYunpanItem() {
      console.log('addYunpanItem ...');
      this.isEditorShowing = true;
    },
    editorShowChanged(value) {
      this.isEditorShowing = value;
    },
  },

子组件：

<template>
  <q-dialog v-model="editorShow" @hide="dialogHide">
    <q-card class="full-width YL__editor_card">
      <q-bar>
        <q-btn dense flat icon="close" v-close-popup>
          <q-tooltip>Close</q-tooltip>
        </q-btn>
      </q-bar>
    </q-card>
  </q-dialog>
</template>
<style lang="sass">
.YL
  &__editor_card
    @media(min-width: $breakpoint-xs-max)
      width: 600px
</style>
<script>
export default {
  name: 'WysisygEditor',
  data() {
    return { post: { body: '' } };
  },
  computed: {
    editorShow: {
      set: function (newV) {
        this.$emit('editor-show-changed', newV);
        // this.isEditorShow = newV;
      },
      get: function () {
        return this.isEditorShow;
      },
    },
  },
  props: ['isEditorShow'], // 微信auth code

  mounted() {
    console.log('WysisygEditor is mounted');
  },

  methods: {
    dialogHide() {}
  },
};
</script>

子组件的dialog关闭时，this.$emit('editor-show-changed', newV); 通知父组件修改isEditorShowing为false，则dialog就隐藏了。这里子组件的v-model改成一个computed 的data，因为原先直接用props时是会警告的。这里子组件隐藏时一定要通知父组件修改传过来的参数值，如果不通知因为没有修改父组件的isEditorShowing一直都是true，不会重新渲染子组件。