使用Svelte组件导出函数

Question

我是新手，需要一点帮助。我有一个重量换算功能，可以计算磅和公斤之间的换算。有两个输入，输入磅值会自动显示公斤，反之亦然。

let k = '';
let l = '' ;

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

并且输入设置如下：

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


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

然后我使用值k来计算以毫克和毫升为单位的药物剂量，并使用一系列药物提供的值。当重量改变时，剂量和体积也会改变。

[计算出的剂量和体积设置如下：

    {#each antibiotics as antibiotic, i}

    <div>{((k * antibiotic.dosevalue) / antibiotic.concs).toFixed(2)}</div>

     <div> {(k *   antibiotic.dosevalue).toFixed(2)} </div>

    {/each}

编辑并更新的REPL

效果很好。我想做的是设置一个苗条的组件，这样我就可以导出html和2个函数，以便在许多不同的页面中使用。

Weightconvert.svelte是：

   <script>

  let  k = ''; 
  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="inputPounds" name="inputKilograms" type="number" placeholder="kgs" 
 bind:value={k}  on:input="{e => setBothFromK(e.target.value)}" min="0"`

App.svelte是：

   <script>
   let k = '';
   let l = '' ;

   import Weightconvert, {setBothFromK , setBothFromL } from './Test.svelte';
   let dosevalue = 20;
   let concs = 3;
   </script>

  <Weightconvert ></Weightconvert>

     <div bind:this={k}> Dose: {(k * dosevalue).toFixed(2)}</div>

     <div  bind:this={k}> Volume: {((k * dosevalue) / concs).toFixed(2)} </div>

重量换算器功能在每一页中起作用，但是没有计算剂量和体积。作为新手，我不确定如何使它工作。感谢您的帮助。

这里是REPL，具有基本功能，但没有组件导入

Answer 1

要export组件中的函数，您必须将其绑定到调用父级中，然后该父级中的其他任何地方都可用

<Weightconvert bind:this={myweightconvert}></Weightconvert>
<input .... on:input="{e => myweightconvert.setBothFromK(e.target.value)}">

<script>
let myweightconvert;
</script>

Answer 2

您可以利用context="module"脚本标签从组件中导出功能。

例如：

https://svelte.dev/docs#script_context_module

https://svelte.dev/examples#module-exports