uniapp中 如何父类与uni-popup-dialog中的子类传array

在 uniapp 中，父组件可以通过 props 将数据传递给子组件，包括数组类型的数据。而 uni-popup-dialog 组件是一个弹出框组件，需要使用 slot 来插入自定义的内容。因此，如果要在父组件中传递数组数据给 uni-popup-dialog 中的子组件，可以通过以下步骤实现：

1. 在父组件中定义一个数组类型的数据，如：

<template>
  <div>
    <button @click="showPopup">显示弹出框</button>
    <uni-popup-dialog
      v-model="showDialog"
      :title="title"
    >
      <child-component :data="dataArray"></child-component>
    </uni-popup-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDialog: false,
      title: '弹出框标题',
      dataArray: [
        { id: 1, name: '数据1' },
        { id: 2, name: '数据2' },
        { id: 3, name: '数据3' },
      ],
    };
  },
  methods: {
    showPopup() {
      this.showDialog = true;
    },
  },
};
</script>

2. 在 uni-popup-dialog 组件中使用 slot 插入子组件，并将数组数据作为 props 传递给子组件，如：

<template>
  <uni-popup-dialog
    v-model="showDialog"
    :title="title"
  >
    <child-component :data="dataArray"></child-component>
  </uni-popup-dialog>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  props: {
    dataArray: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      showDialog: false,
      title: '弹出框标题',
    };
  },
};
</script>

3. 在子组件中定义 props，接收父组件传递的数组数据，并在模板中使用该数据，如：

<template>
  <div>
    <ul>
      <li v-for="item in data" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
};
</script>

这样，父组件就可以将数组数据传递给 uni-popup-dialog 中的子组件，并在子组件中使用该数据。