【Svelte】-（7）绑定｜Each 块绑定 / audio video 媒体标签绑定 / client offset 尺寸绑定 / this / 组件绑定

Each 块绑定

您也可以在 Each 的过程中使用。

不过需要注意的是，与这些 交互会改变数组。当要使用不可变数据，应该去避免使用这些绑定，并且改用事件来处理这些内容。

<script>
  let items = [{}, {}, {}]
</script>

{#each items as item,i}
  <div>
    <p>
      {i}：<input bind:value={item.input}>
    </p>
    <b>
      value: {item.input}
    </b>
  </div>
{/each}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

尽管没有定义 item.input，但还是可以使用

媒体标签绑定

和 标签也有许多可绑定属性。

只读属性

双向绑定

视频还有独特的 videoWidth 和 videoHeight 可以绑定，效果当然不言而喻。

尺寸绑定

每个 block（块级）元素都有、clientWidth 、 clientHeight 和 offsetWidth 、 offsetHeight。

当然都是只读的。

<script>
  let size = 25
  let oX, oY
</script>

<input type=range min=10 max="50" bind:value={size}>

<div>
  <span
    style="font-size: {size}px;"
    bind:offsetWidth={oX}
    bind:offsetHeight={oY}
  >
    我想养只猫
</span>
</div>

<p>
  offset width: <b>{oX}</b>px,
  offset height: <b>{oY}</b>px
</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

this

只读 this 可以绑定于每个元素和组件，而且可以获取对 渲染元素的引用。

请注意，在组件挂载之前的值将是undefined，因此我们将逻辑放在 onMount 生命周期函数中。

生命周期在后面的文章会提到。

<script>
  import { onMount } from 'svelte'

  let t = ''
  console.log('挂载前，this内容',t)
  onMount(() => {
    console.log('挂载后，this内容',t)
  })
</script>

<div bind:this={t}>hi</div>
1
2
3
4
5
6
7
8
9
10
11

组件绑定

就像你可以绑定到 DOM 元素的属性一样，你也可以绑定到组件的 props，也可以绑定到组件实例本身，来使用组件内导出的内容。

来看一个示例：

Tips.svelte

<script>
  let tip = null

  export function show(content) {
    tip = content
  }
</script>

{#if tip !== null}
  <div class="tip">
    {tip}
  </div>
{/if}

<style>
  .tip {
    width: 100%;
    height: 40px;
    background: rgb(234, 245, 255);
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

App.svelte

<script>
  import Tips from './Tips.svelte';
  let t;
</script>

<Tips bind:this={t} />

<button on:click={() => t.show('hi')}>Show 'hi'</button>
1
2
3
4
5
6
7
8