Question

随着我的单个文件组件越来越大，我尝试对其进行一些重构。原来，我有几个对话框使.vue文件很大（超过800行）。因此，为了保持组件的清洁，我试图将对话框变成专用的子组件（mydialog）。我正在使用vuetify（不需要熟悉vuetify）。

我在父组件中有一个启用对话框的按钮。我正在将dialog道具发送到子组件，然后将其附加到对话框的v-model。问题是，它只能在第一次使用。那是因为当我单击close按钮时，它会将dialog的值更改为false，并且由于子组件与父组件失去了通信，它将永远保持false 。在这种情况下，我该如何解决？

以下是代码段：

Vue.component('mydialog', {
  props:{
    dialog: {
      type: Boolean,
      default: false
    }
  },

  template: `
<div class="text-xs-center">
    <v-dialog
      v-model="dialog"
      width="500"
    >

      <v-card>
        <v-card-title
          class="headline grey lighten-2"
          primary-title
        >
          A Dialog
        </v-card-title>

        <v-card-text>
          Lorem ipsum dolor sit amet,
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="primary"
            flat
            @click="dialog = false"
          >
            Close
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
`,
  data: function() {
    return {
      // dialog: false,
    }
  }

});

new Vue({
  el: '#app',
  data: {
    dialog: false
  }

});

<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.2.0/vuetify.min.css" />
</head>

<body>
  <div id="app">
    <v-app id="inspire">
      <v-btn color="red lighten-2" dark @click="dialog=true">Click Me</v-btn>
      <mydialog :dialog="dialog"></mydialog>
    </v-app>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.2.0/vuetify.min.js"></script>
</body>

</html>

Answer 1

您的组件通讯有点中断：基本上，您的对话框没有通知应用程序组件已关闭。以下两项更改可启用模式与应用程序之间的上游通信：

在app模板中：

  <mydialog :dialog.sync="dialog"></mydialog>

在mydialog控制器中：

data: function() {
    return {
      dialog$: false,
    };
  },
  methods: {
    onClose() {
      this.dialog$ = false;
      this.$emit('update:dialog', this.dialog$);
    },
  },
  watch: {
    dialog: {
      immediate: true,
      handler() {
        this.dialog$ = this.dialog;
      },
    },
  }

第一个更改使app组件侦听dialog的{{1}}道具的更新。

我在mydialog中添加了一个数据属性mydialog，该数据属性反映了dialog$道具（因为道具被认为是恒定的，不应更改）。观察者会注意dialog的下游更新会更新dialog。 dialog$方法在对话框关闭时更新onClose，并向订阅者（特别是dialog$）发出更新。

app

Vue.component('mydialog', {
  props:{
    dialog: {
      type: Boolean,
      default: false
    }
  },

  template: `
<div class="text-xs-center">
    <v-dialog
      v-model="dialog$"
      width="500"
    >

      <v-card>
        <v-card-title
          class="headline grey lighten-2"
          primary-title
        >
          A Dialog
        </v-card-title>

        <v-card-text>
          Lorem ipsum dolor sit amet,
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="primary"
            flat
            @click="onClose"
          >
            Close
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
`,
  data: function() {
    return {
      dialog$: false,
    };
  },
  methods: {
    onClose() {
      this.dialog$ = false;
      this.$emit('update:dialog', this.dialog$);
    },
  },
  watch: {
    dialog: {
      immediate: true,
      handler() {
        this.dialog$ = this.dialog;
      },
    },
  }
});

new Vue({
  el: '#app',
  data: {
    dialog: false
  },
  template: `
    <v-app id="inspire">
      <v-btn color="red lighten-2" dark @click="dialog=true">Click Me</v-btn>
      <mydialog :dialog.sync="dialog"></mydialog>
    </v-app>
  `,

});

如@ raina77ow所述，您也可以使用event bus解决此类问题，但在这种情况下不是必须的。

重构vue单个文件组件

1 个答案: