Vue3非模版组件modal怎么一次性获取原组件属性

在Vue3中，非模板组件（比如自定义的`Modal`组件）想要一次性获取原组件的所有属性，通常需要通过props进行传递。当父组件创建并显示`Modal`组件时，它会将所有相关的数据作为prop传递给`Modal`。

首先，在`Modal`组件内部，你需要定义哪些属性是接收从父组件传递过来的：

// Modal.vue
<template>
  <div v-if="show" class="modal">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  props: {
    // 定义接收到的属性列表
    show: { type: Boolean, required: true }, // 显示状态
    // 其他可能的属性...
    title: String,
    content: String,
    onOk: Function,
    onCancel: Function,
  },
  data() {
    return {
      // 如果有默认值，可以添加在这里
    };
  },
  // ...其他生命周期钩子、计算属性等
};
</script>

然后，在父组件中调用`Modal`组件，并传入所需的数据：

<!-- ParentComponent.vue -->
<template>
  <button @click="openModal">打开Modal</button>
  <modal :show="modalShow" :title="modalTitle" :on-ok="handleOk" :on-cancel="handleCancel"></modal>
</template>

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

export default {
  components: {
    Modal,
  },
  data() {
    return {
      modalShow: false, // 默认隐藏
      modalTitle: '这是一个标题', // 示例值
      // 其他可能的属性...
    };
  },
  methods: {
    openModal() {
      this.modalShow = true;
    },
    handleOk() {
      // 执行操作
      this.closeModal();
    },
    handleClose() {
      this.modalShow = false;
    },
  },
};
</script>

在这个例子中，`Modal`组件通过`props`获取了`show`, `title`, 和两个事件处理器`onOk`和`onCancel`。当你需要传递更多的属性，只需按照这种方式增加即可。