前端开发

原创于 2021-05-23 10:20:34 发布 · 129 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

学习笔记专栏收录该内容

70 篇文章

订阅专栏

本文展示了如何在Vue中使用Vuetify创建一个DeleteConfirmDialog组件，通过props接收外部数据，并通过事件触发器向外传递数据，包括确认删除操作时携带的对象数据。例子中详细展示了模板、脚本部分的实现，强调了组件间数据通信的重要性。

yarn dev 启动

Vue & Vuetify

从外面向component里传数据使用props，从component向外面传数据使用事件，可以将对象作为事件的参数抛出。

<template>
  <!--DeleteConfirmDialog-->
  <v-dialog v-model="show" width="500px">
    <v-card>
      <v-card-title class="headline"
        >Are you sure you want to delete this item?</v-card-title
      >
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="blue darken-1" text @click="closeDelete">Cancel</v-btn>
        <v-btn color="blue darken-1" text @click="deleteItemConfirm">OK</v-btn>
        <v-spacer></v-spacer>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>
<script>
export default {
  name: "DeleteConfirmDialog",
  props: ["show", "formData"],
  methods: {
    closeDelete: function () {
      this.$emit("cancel");
    },
    deleteItemConfirm: function () {
      this.$emit("ok", this.formData);
    },
  },
};
</script>