我正在尝试使用一些指令道具来与svelte:component
一起使用。我的目标是根据我要渲染的组件为svelte:component
提供不同的道具。对于常规道具,我可以使用{...spread}
运算符并像在REPL中那样切换spread
对象上的键:
https://svelte.dev/repl/74593f36569a4c268d8a6ab277db34b5?version=3.12.1
但是,如果我要使用bind:value={something}
之类的指令,则此方法将无效。有什么办法可以做到这一点?还是我被迫将所有可能的道具接受到我可能渲染的每个可能的组件中?
基本上我想做这样的事情:
<script>
let component;
let props;
let someValue = 'something';
const component1 = () => {
component = Component1;
props = {
prop1: 'something'
};
};
const component2 = () => {
component = Component2;
props = {
bind:prop2: someValue // <--- Cannot use directives like this :(
};
};
page1();
</script>
<button on:click={page1}>page1</button>
<button on:click={page2}>page2</button>
<svelte:component this={component} {...props}/>