如何在每次使用子组件时在单个父组件中实例化svelte组件的不同实例

Question

我正在svelte中创建一个自定义选择菜单，在尝试编辑选择菜单的向下图标的转换属性时遇到问题。

我正在创建一个表单，其中多个选择菜单导入到一个父组件。在单击父零部件文件中使用的第二个选择菜单框时，只有第一个选择菜单盒的图标会发生转换，而第二个选项菜单盒图标的位置不会发生变化。

我认为这是因为在编译过程中，两个导入的组件(选择菜单(共享同一个类。如果我的假设是正确的，有没有任何方法可以在每次使用选择组件时在父组件中实例化选择菜单组件的实例？

<script>
export let displayText;
let clickCount = 0;
</script>
<div
class="selection"
on:click={() => {
clickCount++;
clickCount == 1
? (document.querySelector(".arrow").style.transform = "rotate(180deg)")
: (document.querySelector(".arrow").style.transform = "rotate(0deg)");
clickCount == 2 ? (clickCount = 0) : (clickCount = clickCount);
}}
>
<span>{displayText}</span>
<div class="arrow" />
</div>
<style>
.selection {
display: flex;
border-radius: 5px;
padding-left: 10px;
padding: 10px;
font-weight: bold;
background-color: #363636;
font-size: 14px;
align-items: center;
cursor: pointer;
}
.selection .arrow {
transition: all 0.5s;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid white;
margin-left: 10px;
}
</style>

Answer 1

问题是document.querySelector(".arrow")总是找到类的第一个元素。Svelte有其他工具可以避免这种情况，并在不查询DOM的情况下定位和操作组件内的元素。在这里你可以使用class:指令

REPL-

<script>
export let displayText;
let open = false
</script>
<div class="selection"
on:click={() => open = !open}
>
<span>{displayText} - open = {open}</span>
<div class="arrow"
class:rotated={open}
/>
</div>
<style>
.selection {
...
}
.selection .arrow {
...
}
.rotated {
transform: rotate(180deg);
}
</style>