重构vue单文件组件答案

【问题标题】：Refactoring vue single file components重构vue单文件组件
【发布时间】：2019-02-06 19:47:06
【问题描述】：

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

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

这里是sn-p：

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>

【问题讨论】：

看起来像 this one 的副本。

标签： javascript vue.js vuetify.js

【解决方案1】：

您的组件通信有点偏离：基本上您的对话框没有通知应用程序组件它已关闭。以下两个更改启用了 modal 和 app 之间的上游通信：

在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 组件侦听mydialog 的dialog 属性的更新。

在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>
  `,

});

<!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"></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>

正如@raina77ow 所提到的，您也可以使用event bus 解决此类问题，但在这种情况下没有必要。

【讨论】：