props, $emit

一元的なデータ管理

コンテナ=ビジネスロジックコンポーネント
同じ場所で
It's like Vuexのサムネイル

データをpropsに降格する

<template>
	<div id="app">
	<TodoList v-bind: propsdata="todoItems"></TodoList>
        v-bind: 내려보낼 프롭스 속성 이름 = "현재 위치의 컴포넌트 데이터 속성"
	</div>
</template>

<script>
export default {
    data(){
        return{
            todoItems: []
            이 todoItems를 propsdata라는 이름으로 TodoList에 내려보낸 것
        }
    }
}
</script>

<script>
export default {
	props: ['propsdata']
}
</script>

イベントを$emitにアップロード

<template>
<TodoInput @addTodoItem="addOneItem"></TodoInput>
	<!--@하위 컴포넌트에서 발생시킨 이벤트 이름 = "현재 컴포넌트의 메소드 명"-->
	<!--하위 컴포넌트의 이벤트 발생이 메소드 실행의 조건이 됨-->
</template>

<script>
methods: {
    addOneItem(todoItem){
        //하위 컴포넌트에서 올려보낸 인자를 todoItem이라는 이름으로 받음
        var obj = {completed: false, item: todoItem};
        localStorage.setItem(todoItem, JSON.stringify(obj));
        this.todoItems.push(obj);
    }
}
</script>

<script>
	export default {
        methods: {
            addTodo() {
                if (this.newTodoItem !== ' '){
                    this.$emit('addTodoItem', this.newTodoItem)
    // this.$emit('이벤트 이름', 인자1, 인자2, ...)
    // 하위 컴포넌트에서 발생시킨 이벤트 == 하위 컴포넌트에서 상위 컴포넌트로 보내는 신호와도 같다
                }
            }
        }
    }
</script>

データ修正時の注意事項

<script>
	export default {
        methods: {
            toggleOneItem(todoItem, index){
                todoItem.completed = !todoItem.completed;
            }
        }
    }
</script>

<template>
	<div>
        <ul>
            <li v-for="(todoItem, index) in propsdata">
    ...
    		</li>
    	</ul>
    </div>
</template>

<script>
	export default {
        methods: {
            toggleOneItem(todoItem, index){
                this.todoItems[index].completed = !this.todoItems[index].completed;
            }
        }
    }
</script>