입문

Svelte 초보자를 위한 보도.
코드와 동작 확인은 "여기 REPL". 으로 할 수 있습니다.

기본

Tutorial Binding/Text inputs에도 기재되어 있으며, Svelte에는 원소에 추가bind를 통해 <script> 라벨에 적힌 변수와 양방향으로 귀속되어 있다.
App.svelte

<script>
    let name = 'world';
</script>

<input bind:value={name}>

<h1>Hello {name}!</h1>

동작 확인

서브어셈블리 값을 입력하려면 다음과 같이 하십시오.

이제 생성AppInput.svelte이 서브어셈블리로 사용됩니다.
AppInput.하위 레벨

<script>
    // exportで宣言するとコンポーネントのpropsになる
    export let value;
</script>

<input bind:value>

<input bind:value>과<input bind:value={value}>동일합니다.
그리고 App.svelte (부대) 의 호출 방법은 이렇다.
App.아버지

<script>
+   import AppInput from './AppInput.svelte';
    let name = 'world';
</script>


- <input bind:value={name}>
+ <AppInput bind:value={name} />

<h1>Hello {name}!</h1>

포인트는 상위 및 하위 어셈블리bind:여야 합니다.

손자 구성 요소의 입력 값을 바인딩하시겠습니까?

이전 AppInput.svelte 을 베이스 어셈블리로 사용하면 한 어셈블리에 여러 개 AppInput.svelte 가 있을 수 있습니다.
예를 들어 아래의 로그인 화면을 들 수 있다.

로그인 화면의 구성 요소는 다음과 같습니다.

손 부품

AppInput.svelte（孫）의 실현을 조금만 더 개량하다.
AppInput.손자

<script>
-   export let value;
+   export let value = '';
+   export let type = 'text';
+   export let name = '';
+   export let placeholder = '';
+   const props = {
+       type,
+       name,
+       placeholder,
+   };
</script>


- <input bind:value={value}>
+ <input
+   bind:value
+   {...props}
+ />

주의사항 (input 요소에 type을 설정하시겠습니까?)

input 요소에 직접 설정 type 하면 다음과 같은 오류가 발생할 수 있습니다. props 변수를 통해 설정하십시오.
'type' attribute cannot be dynamic if input uses two-way binding

서브어셈블리

FormInput.svelte（子）의 구현은 태그 + 입력 항목입니다.부모 대신 전달된 속성 값만 손자에게 전달됩니다.**여기에도 bind:value 중 연동 value 값이 필요합니다.
FormInput.하위 레벨

<script>
    import AppLabel from './AppLabel.svelte';
    import AppInput from './AppInput.svelte';

    export let type;
    export let name;
    export let title;
    export let value;
    export let placeholder;
</script>

<AppLabel name='{name}' title='{title}' />
<AppInput
    type='{type}'
    name='{name}'
    placeholder='{placeholder}'
    bind:value
/>

상위 어셈블리

로그인한 구성 요소로 email 및 password 을 입력해야 하므로 서브구성 요소로 두 개 FormInput 를 참조했습니다.
Login.svelte

<script>
    import FormInput from './FormInput.svelte';
    import AppButton from './AppButton.svelte';

    let email;
    let password;

    const login = () => {
        console.log(`${email} | ${password}`);
    };
</script>

<div>
    <FormInput
        type='email'
        name='email'
        title='email'
        bind:value='{email}'
        placeholder='メールアドレスを入力してください'
    />
    <FormInput
        type='password'
        name='password'
        title='パスワード'
        bind:value='{password}'
        placeholder='パスワードを入力してください'
    />
</div>
<AppButton on:click='{login}'>ログイン</AppButton>

주의사항(bind:value는 무엇입니까?)

지금까지는 bind:value 로 정의되었는데, 이것은 bind:value='{value}' 의 줄임말이다.따라서 각각 bind:value='{email}' 및 bind:value='{password}' 와 같은 bind 객체를 지정해야 합니다.
물론 bind:value 의 value 도 export 의 변수명이기 때문에 FormInput.svelte 에서
FormInput.svelte

    export let inputValue;

이 색상은 색상이 바래집니다.