写一个vue对话框组件，根据数据源列出可选的人员

好的，下面是一个简单的 Vue 对话框组件示例，根据数据源列出可选的人员：

<template>
  <div class="dialog">
    <h2>{{ title }}</h2>
    <ul>
      <li v-for="person in people" :key="person.id" @click="selectPerson(person)">
        {{ person.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    people: Array,
  },
  methods: {
    selectPerson(person) {
      this.$emit('person-selected', person);
    },
  },
};
</script>

在这个组件中，我们接受两个属性：`title` 和 `people`。`title` 属性用于设置对话框的标题，而 `people` 属性是一个数组，包含可选的人员信息。

我们在组件中使用了 `v-for` 指令来遍历 `people` 数组，将每个人员信息渲染成一个列表项。当用户点击某个人员时，我们调用 `selectPerson` 方法并通过 `$emit` 方法触发一个 `person-selected` 事件，将选中的人员对象作为参数传递给父组件。

在父组件中，我们可以监听 `person-selected` 事件，获取选中的人员对象，并进行相应的处理。