父组件：

<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，不会重新渲染子组件。

 

 

 

原文地址：http://www.cnblogs.com/zjhgx/p/16821463.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性