父组件使用子组件
<div>单击图片预览,点击遮罩层可关闭</div>
<preview :name="name"></preview>
<script lang='ts'>
import { defineComponent, reactive, toRefs, SetupContext } from "vue";
interface Name {
[key: string]: string;
}
interface Data {
name?: Name[];
}
export default defineComponent({
name: "",
props: {},
components: {},
setup(props, ctx: SetupContext) {
const data: Data = reactive<Data>({
name: [{ pre: require("@/assets/logo.png") }]
});
return {
...toRefs(data)
};
}
});
</script>
子组件
props: {
name: {
type: Array,
required: true
},
}