将数据从父级传递到对话框

// 父组件
<template>
  <div>
    <button @click="openDialog">打开对话框</button>
    <Dialog :data="data" :visible="dialogVisible" @close="closeDialog" />
  </div>
</template>

<script>
import Dialog from './Dialog.vue';

export default {
  data() {
    return {
      data: '这是父组件的数据',
      dialogVisible: false
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    }
  },
  components: {
    Dialog
  }
};
</script>

// 对话框组件
<template>
  <div v-if="visible">
    <h2>对话框</h2>
    <p>{{ data }}</p>
    <button @click="updateData">修改数据</button>
    <button @click="close">关闭对话框</button>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: String,
      required: true
    },
    visible: {
      type: Boolean,
      required: true
    }
  },
  methods: {
    updateData() {
      // 在对话框中修改数据
      // ...
    },
    close() {
      this.$emit('close');
    }
  }
};
</script>