배경.

Svelt를 배우고 있습니다.재미있었지만 친자관계에서 구성 요소의 데이터(&활동)교환공식 홈페이지 안내을 봐도 별 느낌이 없어서 적어놨어요.

작업 환경

Node v7.4.0
svelte-cli version 1.3.4
svelte version 1.9.1
OS windows10 64bit

우선 간단한 데이터 교환(속성)부터 시작합니다.

each를 통해 사용자 정보를 모듈에서 순서대로 수신하고 표시합니다.
apps.html

{{#each users as user}}
    <UserProfile user={{user}} />
{{/each}}

<script>
    import UserProfile from './UserProfile.html';

    export default {
        components: {
            UserProfile
        },
        data(){
            return {
                users: [
                    {name: 'test1', age : 30},
                    {name: 'test2', age : 40},
                    {name: 'test3', age : 50}
                ]
            }
        }

    };
</script>

UserProfile.html

<p>ユーザー名：{{user.name}}[{{user.age}}歳]</p>

// 結果

ユーザー名：test1[30歳]
ユーザー名：test2[40歳]
ユーザー名：test3[50歳]

위에서 말한 바와 같이 단순한 재산인계는 구성 요소가 호출될 때プロパティ名=値 형식으로 쓰면 아이의 구성 요소로부터 직접{{コンポーネント名}} 받을 수 있다.처음에는 프로스와opts 등이 필요 없어요.

부모 쪽에서 아이가 일어난 사건을 탐지하고 싶어요.

다음은 이벤트의 교환입니다.예를 들어 구글Material Design Lite을 이용하여 유니버설 구성 요소를 만들고 싶습니다.예를 들어 그 중에서 고르다text field.
아이의 조립품은 사이트를 참고하여 끈적끈적하게 쓴 말이다
mdl-textfield.html

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" name={{name}} id={{name}}>
    <label class="mdl-textfield__label" for={{name}}>{{label}}</label>
</div>

이런 느낌인가?속성으로name과 label을 수락합니다.
이 곳에서 input에 입력한 정보를 부모 구성 요소에 보냅니다.
이 경우,component 방법의 Fire를 사용합니다.
mdl-textfield.html

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" name={{name}} id={{name}}
    on:keyup="fire('changevalue', {val: event.target.value})">
    <label class="mdl-textfield__label" for={{name}}>{{label}}</label>
</div>

Fire의 첫 번째 매개변수는 불이 난 이벤트 이름을, 두 번째 매개변수는 상위 어셈블리에 전달된 데이터 이름을 Object 형식으로 기술합니다.이 예에서는 키를 입력할 때마다 이벤트에 불이 붙습니다.
이렇게 하면 부모 구성 요소는 다음과 같이 쓸 수 있다.
apps.html

<MdlTextfield on:changevalue="update(event.val)" name="test" label="あなたの名前は？" />
<p>名前は{{val}}ですね</p>

<script>
  import MdlTextfield from './mdl-textfield.html';

  export default {
    components: {
      MdlTextfield
    },
    data(){
      return {
        val: ''
      }
    },
    methods: {
      update(val) {
        this.set({val: val})
      }
    }

  };
</script>

구성 요소에 있어서 아이는 화재 사건'change value'를 받아들여 업데이트 방법에 맡겼다.이 때 부모 측의 이벤트 대상은 아이 대상이 건네준 데이터 이름으로 데이터를 입력합니다.(아이 쪽{category: 'test'}에서 교부하면 부모event.category에서'test'를 수령할 수 있습니다.

총결산

이렇게 되면 부모님은↔아이들 사이에서 데이터를 교환할 수 있다.