04. Vue CLI 3 - Component 메모

OS	Windows 10 Home 64bit 버전 1903 (OS 빌드 18362.836)
Vue CLI	3.0.0
Edit Tool	Intellij IDEA 2019.1.3

 

작성법만 다를 뿐 결과는 같습니다

 

#1-1. 자식 컴포넌트에 v-for 작성

<template>
    <div id="app">
        <div class="container">
            <div class="col-md-6 offset-md-3">
                <h1 class="text-center mb-4">TODO 어플리케이션</h1>
                <input type="text" class="form-control" v-model="userInput" @keyup.enter="addNewTodo">

                <div class="list-group mt-4">
                    <todo :active-todo-list="activeTodoList" @child="toggleTodoState" />
                </div>

                <div class="text-right">
                    <button type="button" class="btn btn-sm" @click="changeCurrentState('active')">할 일</button>
                    <button type="button" class="btn btn-sm" @click="changeCurrentState('done')">완료</button>
                    <button type="button" class="btn btn-sm" @click="changeCurrentState('all')">전체</button>
                </div>


            </div>
        </div>
    </div>
</template>

<script>

    import Todo from "@/Todo";

    export default {
        name: 'App',
        components: {Todo},
        data() {
            return {
                userInput: '',
                todoList: [],
                currentState: 'active'
            }
        },
        computed: {
            activeTodoList() {
                return this.todoList.filter(todo => this.currentState === 'all' || todo.state === this.currentState)
            }
        },
        methods: {
            changeCurrentState(state) {
                this.currentState = state
            }
            ,
            addNewTodo() {
                this.todoList.push({
                    label: this.userInput,
                    state: 'active'
                })
                this.userInput = ''
            },
            toggleTodoState(todo) {
                console.log(todo)
                todo.state = todo.state === 'active' ? 'done' : 'active'
            }
        },
    }
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

<template>
    <button class="list-group-item text-left" v-for="(todo, index) in activeTodoList" :key="index"
            @click="clickButton(todo)">
        {{ todo }}
    </button>
</template>
<script>
    export default {
        name: 'todo',
        props: {
            activeTodoList: {
                type: Array,
            }
        },
        methods: {
            clickButton(todo) {
                console.log(todo)
                this.$emit('child', todo)
            }
        }
    }
</script>

자식 컴포넌트에서 여러개의 인자를 넘겨줄 수 있지만, 부모 컴포넌트에서 태그에 매개변수를 받는 코드를 작성하면 오류를 발생한다

@child="toggleTodoState(todo)" 이런 식으로 사용하는 경우 자식 컴포넌트에서 넘어온 인자를 무시하고

부모 컴포넌트의 todo 인자를 찾게 된다 (존재하지 않아 undifinded 반환)

때문에 @child="toggleTodoState" 여기 까지만 작성하고 메소드 부분에는 todo 매개변수를 받는 형식으로 작성해야 받아진다

 

#1-2. 부모 컴포넌트에 v-for 작성

<template>
    <div id="app">
        <div class="container">
            <div class="col-md-6 offset-md-3">
                <h1 class="text-center mb-4">TODO 어플리케이션</h1>
                <input type="text" class="form-control" v-model="userInput" @keyup.enter="addNewTodo">

                <div class="list-group mt-4">
                    <template v-for="(todo, index) in activeTodoList" :key="index">
                        <todo :label="todo.label" @component-click="toggleTodoState(todo)" />
                    </template>
                </div>

                <div class="text-right">
                    <button type="button" class="btn btn-sm" @click="changeCurrentState('active')">할 일</button>
                    <button type="button" class="btn btn-sm" @click="changeCurrentState('done')">완료</button>
                    <button type="button" class="btn btn-sm" @click="changeCurrentState('all')">전체</button>
                </div>


            </div>
        </div>
    </div>
</template>

<script>

    import Todo from "@/Todo";

    export default {
        name: 'App',
        components: {Todo},
        data() {
            return {
                userInput: '',
                todoList: [],
                currentState: 'active'
            }
        },
        computed: {
            activeTodoList() {
                return this.todoList.filter(todo => this.currentState === 'all' || todo.state === this.currentState)
            }
        },
        methods: {
            changeCurrentState(state) {
                this.currentState = state
            }
            ,
            addNewTodo() {
                this.todoList.push({
                    label: this.userInput,
                    state: 'active'
                })
                this.userInput = ''
            },
            toggleTodoState(todo) {
                console.log(todo)
                todo.state = todo.state === 'active' ? 'done' : 'active'
            }
        },
    }
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

<template>
    <button class="list-group-item text-left" @click="clickButton()">
        {{ label }}
    </button>
</template>
<script>
    export default {
        name: 'todo',
        props: ['label'],
        methods: {
            clickButton() {
                this.$emit('component-click')
            }
        }
    }
</script>

 

자식 컴포넌트에서 $emit() 을 사용하는 경우 대문자를 사용하지 못한다 그래서 케밥 케이스처럼 사용해야한다

 

#2. 모듈 자동 import

ctrl + spacebar

 

#3. 자식 컴포넌트 생성법

플러그인 필요

vuex 를 사용할 경우 따로 관리하기 때문에 @read 를 사용하지 않아도 된다 (vuex 가 더 효율적으로 관리할 수 있다)

 

#4. Vue CLI 3 에서는 eventBus 를 사용하지 않는다

 

Vue 3로 마이그레이션하기 위해 준비해야 할 것

 

기존방식과 EventBus 를 이용한 방식

 

EventBus 를 이용하면 1단계만 거치면 된다

EventBus 방식은 어디에서 왔는 지 알아내기 어려운 단점이 있다.