有一種簡單的方法可以從父作用域獲取對子組件實體的參考，如教程所示。
我想要的是從組件本身中獲取對組件的參考。因此，如果我們查看上面鏈接的官方 Svelte 演示，我的意思是我想要從 InputField 實體中而不是從 App.svelte 中參考 InputField 實體。
（我想要這個的原因：我需要實體來觸發到外部 JS 庫的鉤子，這些庫將以編程方式與實體互動。）
教程中的代碼副本（為了方便和長壽）
App.svelte：
<script>
import InputField from './InputField.svelte';
let field;
</script>
<InputField bind:this={field}/>
<button on:click={() => field.focus()}>Focus field</button>
InputFiled.svelte：
<script>
let input;
export function focus() {
input.focus();
}
// Somewhere here, I want a var, like you might imagine the following to do:
let myself = this;
</script>
<input bind:this={input} />
uj5u.com熱心網友回復：
您可以從父母那里獲得參考并將其傳遞給孩子：
<script>
import InputField from './InputField.svelte';
let field;
</script>
<InputField bind:this={field} {field}/>
<button on:click={() => field.focus()}>Focus field</button>
一旦你得到這個欄位，就把它傳遞給輸入
<script>
let input;
export let field;
export function focus() {
input.focus();
}
let myself;
$:if(field) myself = field;
</script>
<input bind:this={input} />
你可以在背景關系中使用它。
uj5u.com熱心網友回復：
將在父級中設定的參考作為道具傳遞給子級時，可以在組件本身內部使用它 > REPL
App.svelte
<script>
import Component from './Component.svelte';
let reference
</script>
<Component bind:this={reference} {reference}/>
組件.svelte
<script>
export let reference;
$: reference && console.log('reference in component', reference)
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/364900.html
標籤：javascript 苗条的 苗条 3
上一篇：Javascript-在forEach回圈中撰寫多個if條件而不撰寫單獨的方法的最短方法
下一篇：從多維陣列動態創建多維物件