如何将 querySelector 的范围限定为 Svelte 中的组件？

Question

我有这个组件，我想以状态驱动的方式不可行的方式对其子元素进行一些操作。所以我想在其中使用一个语句和一个 querySelector 。但是我怎样才能将它的范围限定到元素呢？页面中有多个组件实例，因此 class 或 id 是不可能的。我怎样才能做到这一点？

这是一个简化的代码：

    <script>
      export let value = ''
      export let readonly = true

      $: if (value && !readonly){
      // selects the first element in the document, not the one from this instance 
      const nd = document.querySelector('.forminput')
      // Do something with nd
    }
   </script>

    <textarea bind:value wrap="soft" rows="1" class="forminput"></textarea>

Answer 1

您可以使用 bind:this 将元素分配给变量

<script>
   let wrapper;
</script>

<div bind:this="{wrapper}"></div>

现在您可以使用 wrapper 就像您从 querySelector

中获取它一样

Answer 2

基于 Stephane Vanraes 的回答，使用 bind:this 将组件的顶级元素绑定到变量，然后在该根元素上使用 querySelector 和 querySelectorAll .例如：

<script>
  import { onMount } from 'svelte';
  let root;
  let text;
  let value;

  onMount(() => {
     const nd = root.querySelectorAll('.forminput');
     // Do something with nd, such as adding event listeners, styles, etc.
  });
</script>

<div bind:this={root}>
  <input type="text" bind:value class="forminput"/>
  <textarea bind:text wrap="soft" rows="1" class="forminput"></textarea>
</div>

然后您可以在您的组件范围内获得 querySelector 的全部功能。

注意root只有在组件挂载后才能正确绑定，因此代码封装在onMount函数中

如何将 querySelector 的范围限定为 Svelte 中的组件？

How to scope querySelector to component in Svelte?

svelte

svelte-component