Inflearn Community Q&A

daeg874823

asked

Getting Started with Vue.js - Age of Vue.js

this in view instance

질문드려요,

Written on

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>

javascriptvuejs

Quiz

43% of people got it wrong. Give it a try!

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

코드의 양을 늘리기 위해

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

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

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

Answer 1

captain

Instructor

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

<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 이라는 걸 배우게 되실텐데 그 때 사용하시면 됩니다. 강의에서 안내드린 대로만 사용하시면 됩니다 :)

daeg874823

Questioner

답변 감사드려요~! :)

daeg874823

asked

Ask a question