EVENT1

by duckduck0054

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>06-18</title>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<!-- child Component 시작 -->
<style>
    .buttonstyle { width:120px; height:30px; text-align: center; }
</style>
<template id="childTemplate">
    <div>
        <button class="buttonstyle" v-on:click="clickEvent"
                v-bind:data-lang="buttonInfo.value">{{ buttonInfo.text }}</button>
    </div>
</template>
<script type="text/javascript">
Vue.component('child-component', { //(모두 소문자이어야 하고 하이픈을 포함해야합니다)
    template : '#childTemplate',
    props : [ 'buttonInfo' ],
    methods : {
        clickEvent : function(e) {
            this.$emit('timeclick', e.target.innerText, e.target.dataset.lang);
            //위의 v-bind의 data-lang과 e.target.dataset.lang의 관계를 잘 보도록
            //data-을 기준으로 e.target.dataset과 매칭이 되고
            //하이픈의 다음의 문자열이 info라면
            //e.target.dataset.info과 된다.
        }
    }
})
</script>
<!-- child Component 끝 -->
<!-- parent Component 시작 -->
<template id="parent-template">
    <div>
        <child-component v-for="s in buttonsaaa" v-bind:button-info="s"
                         v-on:timeclick="timeclickEvent">
        </child-component>
        <hr />
        <div>{{ msg }}</div>
    </div>
</template>
<script type="text/javascript">
//chile-component 태그의 bind:button-info 하이픈 규칙 잊지 말도록!!
Vue.component('parent-component', {
    template : '#parent-template',
    props : [ 'buttonsaaa' ],
    data : function() {
        return { msg:"" };
    },
    methods : {
        timeclickEvent : function(k, v) {
            this.msg = k + ", " +v;
        }
    }
})
//중요한 것 중 하나는 Vue.component로 컴포넌트를 등록할 때 그 순서에 따라
//상위-하위 컴포넌트가 된다고 한다. 그리고 인스턴스 자체가 최상위 컴포넌트가 된다고
//하니 이 점도 중요한 부분 중 하나일 듯 하다.
</script>
<!-- parent Component 끝 -->
<body>
<div id="app">
    <parent-component :buttonsaaa="buttons"></parent-component>
</div>
</body>
<script type="text/javascript">
Vue.config.devtools =...