在我尝试编写的子组件中,我需要获取父对象。注解掉的行不起作用。
AccordionState是:
export type AccordionKeys = | "open" | "disabled";
export type AccordionState = {
[key: string]: {[key in AccordionKeys]: boolean; };
}
子代码为:
<script lang="ts">
import { AccordionState } from "@/types/global";
import { defineComponent, useAttrs } from "vue";
export default defineComponent({
name: "AccordionPane",
props: {
panelName: {
type: String,
required: true,
},
},
computed: {
open(): boolean {
// const attrs = useAttrs();
// const state = attrs.state as AccordionState;
// return state[this.panelName].open && !state[this.panelName].disabled;
return true;
},
disabled(): boolean {
// const attrs = useAttrs();
// const state = attrs.state as AccordionState;
// return state[this.panelName].disabled;
return false;
},
**父组件。**这里计算的getProps显示我正确定义了prop.state,但AccordionPane中的注解代码不起作用。变量“state”为空。我在网上没有看到很多typescript的例子,而且JavaScript的例子是如此的非结构化,我不知道如何使它们适应typescript。
<template>
<div class="accordionControl">
<slot ref="content"></slot>
</div>
<textarea class="debug" v-model="getProps"></textarea>
</template>
<script lang="ts">
import { type AccordionState } from '@/types/global';
import { defineComponent, type PropType } from 'vue';
export default defineComponent({
name: "AccordionControl",
props: {
state: {
type: Object as PropType<AccordionState>,
required: true,
},
isVert: {
type: Boolean,
default: false,
},
allOpen: {
type: Boolean,
default: false,
}
},
computed: {
getProps(): string {
return JSON.stringify(this.$props, null, ' ');
}
}
});
</script>
下面的链接是一个JavaScript示例,它可以工作。
https://play.vuejs.org/#eNp1kDFrwzAQhf/K9RY5YGTaMbUL2ToWOnSoOtjxORhkSUhyl5D/3pMVXCcQ0KDHvfse9854cE7+zoR7rMPRjy5CoDi7N2XGyVkf4QyeBrjA4O0Egq1CGWWO1oQIUzhBk+aFeCetLXy1oc/Pet0/id2K+dRjTz5TFMoq6xSt8DUR6yrnczKLSJPTbSRWAPV1uWsUviiEfcufZ/7k6ZXFoq7WPSzxPyJdtyFKKW+8S+Kj63saRkMf3rpQwhzoEKMPd31oiuCSg9vY+Itv0YmfHZ+XDO2y2KyMgstJNVpNUttTsQBkV2ajbHm86QQvf3ztlVg=
1条答案
按热度按时间n6lpvg4x1#
我最终使用了一个服务。
使用控件:
在答案中还有很多需要解释的,比如样式表和控件,所以我希望你能看到:
编辑:新的公共链接,你应该可以看到这个。
https://codesandbox.io/p/github/geewhizbang/iconBuilder/main?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522panelType%2522%253A%2522TABS%2522%252C%2522id%2522%253A%2522clj0o2kvv000b356mxs0qrg76%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522panelType%2522%253A%2522TABS%2522%252C%2522id%2522%253A%2522clj0o2kvv000d356m2n227iv8%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clj0o2kvv000b356mxs0qrg76%2522%253A%257B%2522id%2522%253A%2522clj0o2kvv000b356mxs0qrg76%2522%252C%2522activeTabId%2522%253A%2522clj1st09l00no356mzhtu2p2h%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clj0o2kvv000a356m5qfapa5a%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Frouter%252Findex.ts%2522%252C%2522id%2522%253A%2522clj0o6qyd00dz356m24q2e1x1%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252F.codesandbox%252Ftasks.json%2522%252C%2522id%2522%253A%2522clj1st09l00no356mzhtu2p2h%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522clj0o2kvv000d356m2n227iv8%2522%253A%257B%2522id%2522%253A%2522clj0o2kvv000d356m2n227iv8%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522clj0o2y5w006l356mlvlq3t5h%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522id%2522%253A%2522clj0o2zf800bt356mgg70yn0j%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clj0o2zf800bt356mgg70yn0j%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D
我希望这不是一个黑客。