具有按钮不同操作的 VueJs 对话框可重用组件

Question

我正在尝试构建一个名为v-dialog 的可重用组件。 我的想法是，当对话框弹出时，将包含两个按钮，分别称为submit 和cancel。

对于对话框组件的submit 按钮，将根据用户单击哪个按钮，与不同的动作链接。

例如button A 将调用函数名A 和button B 将调用函数名B 等等，当用户单击对话框的submit 按钮时。

假设这是我称为DialogReusable.vue 的组件文件

<v-dialog
v-model="dialog"
                  persistent
                  max-width="300"
                >
                  <v-card>
                    <v-card-title
                      class="text-h5"
                      style="word-break: break-word"
                    >
                      Title
                    </v-card-title>
                    <v-card-actions>
                      <v-spacer />
                      <v-btn
                        color="green darken-1"
                        text
                        @click="dialog = false"
                      >
                        Cancel Button
                      </v-btn>
                      <v-btn
                        class="primary"
                        @click="functionSubmits()"
                      >
                        Submit
                      </v-btn>
                    </v-card-actions>
                  </v-card>
                </v-dialog>               

这是我称为MainParent.vue 的父文件 对于这个文件，它有 3 个链接到不同功能的按钮。

当用户单击每个按钮时，Dialog 应该会出现，当用户单击对话框的 submit 按钮时，它将调用我在每个按钮上设置的相应函数名称 @click。

                <v-btn
                  v-if="condition"
                  color="primary"
                  dark
                  @click="functionA()"
                >
                  Function A
                </v-btn>
                <v-btn
                  v-if="condition"
                  class="primary"
                  @click="functionB()"
                >
                  Function B
                </v-btn>
                <v-btn
                  v-if="condition"
                  class="primary"
                  @click="functionC()"
                >
                  Function C
                </v-btn>

Answer 1

这就是通过 Vue 中的props 属性传递函数的概念。

让我向您展示将函数从父组件传递到子组件的第一个示例。

从父级获取值

如果您希望子组件访问父组件的方法，那么将方法直接作为道具向下传递似乎很明显。

<!-- Parent -->
<template>
  <ChildComponent :method="parentMethod" />
</template>

// Parent
export default {
  methods: {
    parentMethod() {
      // ...
    }
  }
}

你的子组件就像：

// Child
export default {
  props: {
    method: { type: Function },
  },
  mounted() {
    // Use the parent function directly here
    this.method();
  }
}

从孩子那里获得价值

在其他情况下，您可能希望从子组件中获取值到父组件中，例如父组件中的函数具有参数名称。

<!-- Parent -->
<template>
  <ChildComponent :method="parentMethod" />
</template>

// Parent
export default {
  methods: {
    parentMethod(valueFromChild) {
      // Do something with the value
      console.log('From the child:', valueFromChild);
    }
  }
}

在子组件中，您在调用它时将值传递给它：

// Child
export default {
  props: {
    method: { type: Function },
  },
  mounted() {
    // Pass a value to the parent through the function
    this.method("some param name");
  }
}

关于你的问题，我认为你可以通过以下方式实现：

假设您有 3 个提交按钮，每个按钮都有不同的操作。

首先让我们创建一个像子组件一样的可重用弹出对话框。

<template>
  <v-dialog
    :value="dialog"
    persistent
    max-width="300"
    @input="$emit('input', $event)"
  >
    <v-card>
      <v-card-title
        class="text-h5"
        style="word-break: break-word"
      >
        Title Dialog
      </v-card-title>
      <v-card-actions>
        <v-spacer />
        <v-btn
          color="green darken-1"
          text
          @click="close"
        >
          Cancel
        </v-btn>
        <v-btn
          class="primary"
          @click="onBtnSubmit"
        >
          Confirm
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>


export default {
  name: 'Dialog',
  props: {
    dialog: {
      type: Boolean,
      required: true
    },
    buttonActionName: {
      type: String,
      required: true
    },
    method: {
      type: Function,
      required: true
    }
  },
  methods: {
    close() {
      this.$emit('close-dialog')
    },
    onReportBtnSubmit() {
      if (this.buttonActionName.length > 0) {
        this.method(this.buttonActionName)
      } else {
        this.method()
      }
      this.close()
    }
  }
}
</script>

<style scoped>

</style>

我假设您了解通过 Vue 中的props 属性传递函数的概念。

// This dialog will pass function `firstBtnSubmit` without param name
<Dialog
   :dialog.sync="firstBtnDialog"
   :method="firstBtnSubmit"
   button-action-name=""
   @close-dialog="firstBtnDialog= false;"
 />
<v-btn
  @click="showDialogFirstBtn">
  firstBtnClick
</v-btn>

// This dialog will pass function `secondBtnSubmit` with param name
<Dialog
   :dialog.sync="secondBtnDialog"
   :method="secondBtnSubmit"
   button-action-name="id1"
   @close-dialog="secondBtnDialog = false;"
 />
<v-btn
  @click="showDialogSecBtn">
  secondBtnClick
</v-btn>

// you can create a third button below by yourself.

export default {
 data() {
   return {
     firstBtnDialog: false,
     secondBtnDialog: false,
     thirdBtnDialog: false,
  },
 methods: {
    firstBtnSubmit() {
       // Do your stuff
    },
    secondBtnSubmit(param) {
       // do your staff with param 
    },
    thirdBtnSubmit () {
       // do your stuff
    },
    // To trigger dialog to pop up 
    showDialogFirstBtn() {
       this.firstBtnDialog = true;
    },
    showDialogSecBtn() {
       this.secondBtnDialog= true;
    },
    showDialogThirdBtn() {
       this.thirdBtnDialog= true;
    }
  }
}

笔记

我不拥有我在这里写的所有内容。

我从不同站点获得的所有内容

Concept to pass function as props

How to use reusable component in Vue: Stackoverflow