Svelte组件导出函数后外部剂量计算失效求助

嘿，我来帮你搞定这个问题！你现在的核心问题是组件内部的状态没有对外暴露，导致父组件（App.svelte）没法同步获取Weightconvert里的重量值。另外你在App里用bind:this={k}是完全错误的——bind:this是用来绑定DOM元素引用的，不是绑定组件数据的。

下面是具体的修复方案：

第一步：修改Weightconvert.svelte，把状态转为可双向绑定的Props #

我们需要把组件内部的k和l改成导出的Props，这样父组件就能通过双向绑定同步这些值。同时调整转换函数，因为现在Props是响应式的，直接修改即可：

<script>
  // 导出Props，设置默认值，支持父组件双向绑定
  export let k = '';
  export let l = '';

  export function setBothFromK(value) {
    k = +value;
    l = +(k * 2.2046226218).toFixed(1);
  }

  export function setBothFromL(value) {
    l = +value;
    k = +(l / 2.2046226218).toFixed(1);
  }
</script>

<input 
  id="inputPounds" 
  name="inputPounds" 
  type="number" 
  placeholder="lbs" 
  bind:value={l} 
  on:input="{e => setBothFromL(e.target.value)}" 
  min="0"
>
<input 
  id="inputKilograms" 
  name="inputKilograms" 
  type="number" 
  placeholder="kgs" 
  bind:value={k} 
  on:input="{e => setBothFromK(e.target.value)}" 
  min="0"
>

第二步：修改App.svelte，通过双向绑定获取组件状态 #

现在父组件可以通过bind:k和bind:l来同步Weightconvert组件里的重量值，然后直接用这些值计算剂量和体积：

<script>
  import Weightconvert from './Weightconvert.svelte';
  // 定义用于同步组件状态的变量
  let k = '';
  let l = '';
  let dosevalue = 20;
  let concs = 3;
</script>

<!-- 通过bind:k和bind:l双向绑定组件内部的状态 -->
<Weightconvert bind:k bind:l />

<!-- 直接用同步后的k值计算剂量和体积，加个空值判断避免NaN -->
<div>Dose: {k ? (k * dosevalue).toFixed(2) : '0.00'}</div>
<div>Volume: {k ? ((k * dosevalue) / concs).toFixed(2) : '0.00'}</div>

为什么原来的方法不行？ #

• 你之前导出的setBothFromK和setBothFromL函数只能修改组件内部的状态，但父组件无法感知这些状态的变化，因为没有建立数据绑定。
• bind:this={k}是错误用法，它的作用是把DOM元素的引用赋值给变量k，而不是绑定组件的数据。

这样修改后，当你在Weightconvert组件里修改磅或千克的值时，App.svelte里的k和l会自动同步，剂量和体积的计算也会实时更新啦！

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