props, $emit

一元的なデータ管理

ひょうじそし
私はただ

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

Appという名前のコンテナで、各サブコンポーネントの保留中のデータの追加と削除を同時に管理します.
TooInputのnewToDoItem
TodoListのtodoItems[]
ローカルストレージ上のtodoItems
統合
App.vueに統合されたtodoItems

例えば、TooList.
従来、ローカルストレージのデータをTodoListのtodoItems[]に転送するには、localStorage.getItem()をリフレッシュして実行する必要がありました.
propsで受信したデータは最初からTodoListvue内にApp.vue의 todoItems(혹은 로컬 스토리지)の部品があると理解できます.更新なしで変更できます.

データをpropsに降格する

App.vue

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

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

TodoList.vue

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

親構成部品-テンプレートセクション-子構成部品ラベルでv-bindに降格するデータを宣言します.
受信サブコンポーネント-scriptセクション-export dafault-propsで親コンポーネントが設定したデータ名[「親コンポーネント設定のフリーデータ名」]

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

App.vue

<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>

TodoInput.vue

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

親構成部品-テンプレートセクション-子構成部品タグ内のv-onイベントと親構成部品にマッピングする方法宣言
サブコンポーネント-scriptセクション-export default-メソッドで、親コンポーネントに$emitで渡すこの文名とパラメータを宣言します.

データ修正時の注意事項

App.vue

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

TodoList.vue

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

todoItemは、propsアプリケーションを介してtoggleOneItemのパラメータです.vueからのデータ
したがって、AppはtodoItemのデータを変更するよりも、不要なサブコンポーネントであるコンテナです.vueですぐに変更したほうがいいです.
App.vue

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

データ管理はコンテナコンポーネントのみで行います!