2

我有这个组件，并且我想以状态驱动方式不可行的方式对其子元素进行一些操作。所以我想在querySelector其中使用一个语句和一个。但是我怎样才能将它的范围限定为元素呢？页面中有组件的多个实例，因此无法使用类或 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>
4

2 回答 2

6

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

<script>
   let wrapper;
</script>

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

现在您可以wrapper像从 querySelector 获得它一样使用它

于 2020-05-04T18:49:49.637 回答
1

基于 Stephane Vanraes 的答案，用于bind:this将组件的顶级元素绑定到变量，然后在该根元素上使用querySelectorand 。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函数中。

于 2020-08-02T16:06:02.240 回答