인프런 커뮤니티 질문&답변

희영

작성한 질문수

Vue.js 시작하기 - Age of Vue.js

뷰 인스턴스에서의 this

질문드려요,

작성

593

안녕하세요, 좋은 강의 감사합니다.!

$emit, props연습할때에

component 등록 방법을 Vue.component로 변경해서 연습을 해봤는데요, 이벤트가 작동은 하지만 아래와 같은 오류가 나요

어느부분을 확인해봐야하는지 어떻게 고쳐야 하는지 아직 잘 모르겠습니다 ㅜㅜ

답변 부탁드려요..!

[오류 내용]

vue.js:634 [Vue warn]: Property or method "addNumber" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>)

vue.js:634 [Vue warn]: Property or method "propsnum" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>)

[연습 소스]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <app-header v-on:pass="logText"></app-header>

        <app-content v-on:addnum="addNumEvent" v-bind:propsnum="number">
            <template id="appContentTemp">
                <div>
                    <button v-on:click="addNumber">Click Add</button>
                    <p>{{propsnum}}</p>
                </div>
            </template>
        </app-content>
       
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

        var appheader = {
            template: '<button v-on:click="passEvent">Click Event!</button>',
            methods:{
                passEvent:function(){
                    this.$emit('pass');
                }
            }
        }

        Vue.component('app-content', {
            template : '#appContentTemp',
            props : {
                propsnum:Number,
            },
            methods: {
                addNumber : function(){
                    this.$emit('addnum');
                }
            }
        }) 

        new Vue({
            el:'#app',
            components:{
                'app-header' : appheader
            },
            data : {
                number : 10
            },
            methods:{
                logText : function(){
                    console.log('hi');
                },
                addNumEvent:function(){
                    this.number += 1;
                    console.log(this.number);
                }
            }
        })

    </script>
</body>
</html>

javascript vuejs

퀴즈

컴포넌트 간에 명확한 통신 규칙이 필요한 주된 이유는 무엇일까요?

코드의 양을 늘리기 위해

복잡한 데이터 관계와 버그 추적의 어려움을 피하기 위해

특정 개발 패턴을 강제하기 위해

컴포넌트의 스타일을 개선하기 위해

답변 1

캡틴판교

지식공유자

안녕하세요, 아래와 같은 코드 패턴은 유효하지 않습니다.

<app-content v-on:addnum="addNumEvent" v-bind:propsnum="number">

<template id="appContentTemp">

<div>

<button v-on:click="addNumber">Click Add</button>

<p>{{propsnum}}</p>

</div>

</template>

</app-content>

컴포넌트 시작 태그와 끝 태그 사이에 코드를 넣는 건 시작하기 강좌 레벨에서 안내해 드리지 않았어요. 추후에 slot 이라는 걸 배우게 되실텐데 그 때 사용하시면 됩니다. 강의에서 안내드린 대로만 사용하시면 됩니다 :)

희영

질문자

답변 감사드려요~! :)

희영

작성한 질문수

전체 Q&A

질문하기