如何获取Svelte父组件宽度并传递给插槽中子组件？

为什么直接在组件上用bind:clientWidth无效？ #

Svelte组件默认不会暴露DOM元素的原生属性，除非组件内部显式导出对应的绑定逻辑。所以直接在自定义组件（比如<Parent>）上使用bind:clientWidth无法生效，这个语法只适用于原生HTML元素。

方案一：父组件通过Slot Props传递宽度（推荐） #

在父组件内部绑定根元素的clientWidth，然后通过Slot的props把宽度传递给子组件，无需在父组件外部声明额外变量。

Parent.svelte

<script>
  let parentWidth;
</script>

<!-- 绑定父组件根元素的宽度 -->
<div bind:clientWidth={parentWidth} class="parent-container">
  <!-- 通过slot传递宽度变量 -->
  <slot {parentWidth} />
</div>

<style>
  .parent-container {
    /* 根据需求设置父组件样式 */
    width: 80%;
    margin: 0 auto;
  }
</style>

使用方式

<Parent>
  <!-- 子组件通过let:parentWidth接收宽度 -->
  <Child let:parentWidth />
</Parent>

子组件里可以直接使用parentWidth变量，父组件宽度变化时会自动同步，自带响应式特性。

方案二：子组件直接获取父元素宽度 #

如果不想依赖父组件传递，子组件可以直接通过DOM API获取父元素的宽度，同时监听窗口resize事件保证响应式更新。

Child.svelte

<script>
  import { onMount } from 'svelte';
  let parentWidth;

  // 更新父组件宽度的方法
  function updateParentWidth() {
    // 这里假设子组件的直接父元素就是目标父组件的根元素
    // 如果有多层嵌套，可以改用this.parentElement.closest('.parent-container')
    const parentElement = this.parentElement;
    if (parentElement) {
      parentWidth = parentElement.clientWidth;
    }
  }

  onMount(() => {
    // 组件挂载后初始化宽度
    updateParentWidth.call(this);
    // 监听窗口resize事件更新宽度
    window.addEventListener('resize', updateParentWidth.bind(this));
    // 组件销毁时移除监听
    return () => window.removeEventListener('resize', updateParentWidth.bind(this));
  });
</script>

<div>父组件当前宽度：{parentWidth}px</div>

注意：这种方法依赖DOM结构，如果父组件的DOM层级变化，需要调整获取父元素的逻辑，稳定性不如方案一。

内容的提问来源于stack exchange，提问作者ICantCode