Vue Component

Component๋ž€ ์กฐํ•ฉํ•˜์—ฌ ํ™”๋ฉด์„ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ๋Š” ๋ธ”๋ก์„ ์˜๋ฏธํ•œ๋‹ค.

์™ผ์ชฝ ๊ทธ๋ฆผ์€ ๊ฐ ์˜์—ญ์„ ์ปดํฌ๋„ŒํŠธ๋กœ ์ง€์ •ํ•˜์—ฌ ๊ตฌ๋ถ„ํ•œ ๊ฒƒ์ด๊ณ , ์˜ค๋ฅธ์ชฝ ๊ทธ๋ฆผ์€ ๊ฐ ์ปดํฌ๋„ŒํŠธ ๊ฐ„์˜ ๊ด€๊ณ„๋ฅผ ๋‚˜ํƒ€๋‚ธ ๊ฒƒ์ด๋‹ค. ์ด๋Ÿฌํ•œ ์ปดํฌ๋„ŒํŠธ ๊ฐ„์˜ ๊ด€๊ณ„๋Š” ๋ทฐ์—์„œ ํ™”๋ฉด์„ ๊ตฌ์„ฑํ•˜๋Š” ๋ฐ ๋งค์šฐ ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•˜๋ฉฐ, ์›น ํŽ˜์ด์ง€ ํ™”๋ฉด์„ ์„ค๊ณ„ํ•  ๋•Œ๋„ ์ด์™€ ๊ฐ™์€ ๊ณจ๊ฒฉ์„ ์œ ์ง€ํ•˜๋ฉด์„œ ์„ค๊ณ„ํ•ด์•ผํ•œ๋‹ค. ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜ ๋ฐฉ์‹์œผ๋กœ ๊ฐœ๋ฐœํ•˜๋Š” ์ด์œ ๋Š” ์ฝ”๋“œ ์žฌ์‚ฌ์šฉ์ด ์‰ฝ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ทฐ์˜ ๊ฒฝ์šฐ์—๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•ด HTML ์ฝ”๋“œ์—์„œ ํ™”๋ฉด์„ ์ง๊ด€์ ์œผ๋กœ ํŒŒ์•…ํ•  ์ˆ˜ ์žˆ๋‹ค. ์ฆ‰, ํ”„๋ ˆ์ž„์›Œํฌ ์ž์ฒด์—์„œ ์ปดํฌ๋„ŒํŠธ ๋ฐฉ์‹์„ ์ถ”๊ตฌํ•˜๋ฉด ๋ชจ๋‘๊ฐ€ ์ •ํ•ด์ง„ ๋ฐฉ์‹์œผ๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ™œ์šฉํ•˜๋ฏ€๋กœ ๋น ๋ฅด๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๋‹ค๋ฅธ ์‚ฌ๋žŒ์˜ ์ฝ”๋“œ๋ฅผ ๋ณด๋Š” ๊ฒƒ๋„ ์ˆ˜์›”ํ•ด์ง„๋‹ค.

์ปดํฌ๋„ŒํŠธ ๋“ฑ๋กํ•˜๊ธฐ

์ง€์—ญ(local) ์ปดํฌ๋„ŒํŠธ๋Š” ํŠน์ • ์ธ์Šคํ„ด์Šค์—์„œ๋งŒ ์œ ํšจํ•œ ๋ฒ”์œ„๋ฅผ ๊ฐ–๊ณ , ์ „์—ญ(global) ์ปดํฌ๋„ŒํŠธ๋Š” ์—ฌ๋Ÿฌ ์ธ์Šคํ„ด์Šค์—์„œ ๊ณตํ†ต์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

์ „์—ญ ์ปดํฌ๋„ŒํŠธ

์ „์—ญ ์ปดํฌ๋„ŒํŠธ๋Š” ๋ทฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋กœ๋”ฉํ•˜๊ณ  ๋‚˜๋ฉด ์ ‘๊ทผ ๊ฐ€๋Šฅํ•œ Vue ๋ณ€์ˆ˜๋ฅผ ์ด์šฉํ•ด ๋“ฑ๋กํ•œ๋‹ค.

Vue.component('์ปดํฌ๋„ŒํŠธ๋ช…',{
  // ์ปดํฌ๋„ŒํŠธ ๋‚ด์šฉ
});
  • ์ปดํฌ๋„ŒํŠธ๋ช… : template ์†์„ฑ์—์„œ ์‚ฌ์šฉํ•  HTML ์‚ฌ์šฉ์ž ์ •์˜ ํƒœ๊ทธ ์ด๋ฆ„์„ ์˜๋ฏธ

  • ์ปดํฌ๋„ŒํŠธ ๋‚ด์šฉ : ์ปดํฌ๋„ŒํŠธ ํƒœ๊ทธ๊ฐ€ ์‹ค์ œ ํ™”๋ฉด์˜ HTML ์š”์†Œ๋กœ ๋ณ€ํ™˜๋  ๋•Œ ํ‘œ์‹œ๋  ์†์„ฑ๋“ค์„ ์ž‘์„ฑ

    • template, data, methods ๋“ฑ ์ธ์Šคํ„ด์Šค ์˜ต์…˜ ์†์„ฑ์„ ์ •์˜ํ•  ์ˆ˜ ์žˆ๋‹ค.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Component</title>
</head>
<body>
    <div id="app">
        <button>์ปดํฌ๋„ŒํŠธ ๋“ฑ๋ก</button>
        <my-component></my-component> <!--์ „์—ญ ์ปดํฌ๋„ŒํŠธ ํ‘œ์‹œ-->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // ์ „์—ญ์ปดํฌ๋„ŒํŠธ ๋“ฑ๋ก
        Vue.component('my-component',{
            template: '<div>์ „์—ญ ์ปดํฌ๋„ŒํŠธ ๋“ฑ๋ก</div>'
        });

        new Vue({
            el: '#app'
        });
    </script>
</body>
</html>

์ธ์Šคํ„ด์Šค ๋‚ด์šฉ์ด ํ™”๋ฉด ์š”์†Œ๋กœ ๋ณ€ํ™˜๋  ๋Œ€ ๋“ฑ๋ก๋œ ์ปดํฌ๋„ŒํŠธ ํƒœ๊ทธ๋„ ํ•จ๊ป˜ ๋ณ€ํ™˜๋œ๋‹ค. ๋ณ€ํ™˜๋œ ํ›„ ์‹ค์ œ HTML ์ฝ”๋“œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

<div id="app">
    <button>์ปดํฌ๋„ŒํŠธ ๋“ฑ๋ก</button>
    <div>์ „์—ญ ์ปดํฌ๋„ŒํŠธ ๋“ฑ๋ก</div>
</div>

์ง€์—ญ ์ปดํฌ๋„ŒํŠธ

new Vue({
  components: {
    '์ปดํฌ๋„ŒํŠธ ๋ช…' : ์ปดํฌ๋„ŒํŠธ ๋‚ด์šฉ
  }
});

์ง€์—ญ ์ปดํฌ๋„ŒํŠธ๋Š” ์ธ์Šคํ„ด์Šค์— components ์†์„ฑ์„ ์ถ”๊ฐ€ํ•˜๊ณ  ๋“ฑ๋กํ•  ์ปดํฌ๋„ŒํŠธ ๋ช…๊ณผ ๋‚ด์šฉ์„ ์ •์˜ํ•˜๋ฉด๋œ๋‹ค.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Component</title>
</head>
<body>
    <div id="app">
        <button>์ปดํฌ๋„ŒํŠธ ๋“ฑ๋ก</button>
        <my-local-component></my-local-component> <!--์ง€์—ญ ์ปดํฌ๋„ŒํŠธ ํ‘œ์‹œ-->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // ์ง€์—ญ ์ปดํฌ๋„ŒํŠธ
        var cmp = {
            // ์ง€์—ญ ์ปดํฌ๋„ŒํŠธ ๋‚ด์šฉ
            template: '<div>์ง€์—ญ ์ปดํฌ๋„ŒํŠธ ๋“ฑ๋ก</div>'
        };

        new Vue({
            el: '#app',
            components: {
                'my-local-component' : cmp
            }
        });
    </script>
</body>
</html>

๋ณ€ํ™˜๋œ ์‹ค์ œ HTML์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

<div id="app">
  <button>์ปดํฌ๋„ŒํŠธ ๋“ฑ๋ก</button>
  <div>์ง€์—ญ ์ปดํฌ๋„ŒํŠธ ๋“ฑ๋ก</div>
</div>

์ง€์—ญ vs ์ „์—ญ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Component</title>
</head>
<body>
    <div id="app">
        <h3>์ฒซ ๋ฒˆ์งธ ์ธ์Šคํ„ด์Šค ์˜์—ญ</h3>
        <my-global-component></my-global-component> <!--์ „์—ญ ์ปดํฌ๋„ŒํŠธ ํ‘œ์‹œ-->
        <my-local-component></my-local-component> <!--์ง€์—ญ ์ปดํฌ๋„ŒํŠธ ํ‘œ์‹œ-->
    </div>
    <hr>
    <div id="app2">
        <h3>๋‘ ๋ฒˆ์งธ ์ธ์Šคํ„ด์Šค ์˜์—ญ</h3>
        <my-global-component></my-global-component>
        <my-local-component></my-local-component>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // ์ „์—ญ์ปดํฌ๋„ŒํŠธ ๋“ฑ๋ก
        Vue.component('my-global-component',{
            template: '<div>์ „์—ญ ์ปดํฌ๋„ŒํŠธ ๋“ฑ๋ก</div>'
        });

        // ์ง€์—ญ ์ปดํฌ๋„ŒํŠธ
        var cmp = {
            // ์ง€์—ญ ์ปดํฌ๋„ŒํŠธ ๋‚ด์šฉ
            template: '<div>์ง€์—ญ ์ปดํฌ๋„ŒํŠธ ๋“ฑ๋ก</div>'
        };

        new Vue({
            el: '#app',
            components: {
                'my-local-component' : cmp
            }
        });

        new Vue({
            el: '#app2'
        });
    </script>
</body>
</html>
image-20191016111015384

์ „์—ญ ์ปดํฌ๋„ŒํŠธ์™€ ์ง€์—ญ ์ปดํฌ๋„ŒํŠธ๋Š” ์œ ํšจ๋ฒ”์œ„๊ฐ€ ๋‹ค๋ฅด๋‹ค. ์ „์—ญ ์ปดํฌ๋„ŒํŠธ๋Š” ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒˆ๋กœ ์ƒ์„ฑํ•  ๋•Œ๋งˆ๋‹ค ์ธ์Šคํ„ด์Šค์— components ์†์„ฑ์œผ๋กœ ๋“ฑ๋กํ•  ํ•„์š”์—†์ด ํ•œ๋ฒˆ๋งŒ ๋“ฑ๋กํ•˜๋ฉด ์–ด๋А ์ธ์Šคํ„ด์Šค์—์„œ๋“ ์ง€ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ์ง€์—ญ ์ปดํฌ๋„ŒํŠธ๋Š” ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒˆ๋กœ ์ƒ์„ฑํ•  ๋•Œ๋งˆ๋‹ค ๋“ฑ๋กํ•ด์ค˜์•ผํ•œ๋‹ค.

vue.js:634 [Vue warn]: Unknown custom element: <my-local-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)

๋‘๋ฒˆ์งธ ์ธ์Šคํ„ด์Šค์˜ <my-local-component> ํƒœ๊ทธ๋Š” ์œ ํšจ ๋ฒ”์œ„ ์•ˆ์— ์žˆ๋”๋ผ๋„ ์ด ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋“ฑ๋ก๋œ ์ฒซ ๋ฒˆ์งธ ์ธ์Šคํ„ด์Šค์˜ ์œ ํšจ ๋ฒ”์œ„๋ฅผ ๋ฒ—์–ด๋‚˜๊ธฐ ๋•Œ๋ฌธ์— ๋ธŒ๋ผ์šฐ์ €์—์„œ HTML ์‚ฌ์šฉ์ž ์ •์˜ ํƒœ๊ทธ๋กœ ์ธ์‹ํ•˜๊ณ , ๋ทฐ์—์„œ๋Š” ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ œ๋Œ€๋กœ ๋“ฑ๋กํ–ˆ๋Š”์ง€ ๋ฌผ์–ด๋ณด๋Š” ์˜ค๋ฅ˜๋ฅผ ํ‘œ์‹œํ•œ๋‹ค.

์ปดํฌ๋„ŒํŠธ ๊ฐ„ ํ†ต์‹ ๊ณผ ์œ ํšจ ๋ฒ”์œ„

์ปดํฌ๋„ŒํŠธ๋Š” ์ž์ฒด์ ์œผ๋กœ ๊ณ ์œ ํ•œ ์œ ํšจ๋ฒ”์œ„๋ฅผ ๊ฐ–๊ธฐ๋•Œ๋ฌธ์— ๋ทฐ๋Š” ์ปดํฌ๋„ŒํŠธ๋กœ ํ™”๋ฉด์„ ๊ตฌ์„ฑํ•˜๋ฏ€๋กœ ๊ฐ™์€ ์›น ํŽ˜์ด์ง€๋ผ๋„ ๋ฐ์ดํ„ฐ๋ฅผ ๊ณต์œ ํ•  ์ˆ˜ ์—†๋‹ค. ๋”ฐ๋ผ์„œ ๊ฐ ์ปดํฌ๋„ŒํŠธ์˜ ์œ ํšจ๋ฒ”์œ„๊ฐ€ ๋…๋ฆฝ์ ์ด๊ธฐ ๋Œ€๋ฌธ์— ๋‹ค๋ฅธ ์ปดํฌ๋„Œํ‹”์˜ ๊ฐ’์„ ์ง์ ‘์ ์œผ๋กœ ์ฐธ์กฐํ•  ์ˆ˜ ์—†๋‹ค.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Sample</title>
</head>
<body>
    <div id="app">
        <my-component1></my-component1>
        <my-component2></my-component2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var cmp1 = {
            template: '<div>์ฒซ ๋ฒˆ์งธ ์ง€์—ญ ์ปดํฌ๋„ŒํŠธ : {{cmp1Data}}</div>',
            data: function(){
                return{
                    cmp1Data: 100
                }
            }
        };
        var cmp2 = {
            template: '<div>๋‘ ๋ฒˆ์งธ ์ง€์—ญ ์ปดํฌ๋„ŒํŠธ : {{cmp2Data}}</div>',
            data: function(){
                return{
                    cmp2Data: cmp1.data.cmp1Data
                }
            }
        };

        new Vue({
            el: '#app',
            components: {
                'my-component1': cmp1,
                'my-component2': cmp2
            }
        });
    </script>
</body>
</html>

์—ฌ๊ธฐ์„œ cmp2Data๋Š” my-component1์˜ data.cmp1Data๋ฅผ ์ฐธ์กฐํ•˜๊ณ  ์žˆ๋‹ค. ํ•˜์ง€๋งŒ my-component2์—์„œ my-component1์˜ ๊ฐ’์„ ์ง์ ‘ ์ฐธ์กฐํ•  ์ˆ˜ ์—†๋‹ค.

์ƒํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ ๊ด€๊ณ„

์ปดํฌ๋„ŒํŠธ๋Š” ๊ฐ๊ฐ ๊ณ ์œ ํ•œ ์œ ํšจ ๋ฒ”์œ„๋ฅผ ๊ฐ–๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ง์ ‘ ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ์˜ ๊ฐ’์„ ์ฐธ์กฐํ•  ์ˆ˜ ์—†๋‹ค. ๋ทฐ ํ”„๋ ˆ์ž„์›Œํฌ ์ž์ฒด์—์„œ ์ •์˜ํ•œ ์ปดํฌ๋„ŒํŠธ ๋ฐ์ดํ„ฐ ์ „๋‹ฌ ๋ฐฉ๋ฒ•์„ ๋”ฐ๋ผํ•˜๋ฉฐ, ๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ ์ „๋‹ฌ ๋ฐฉ๋ฒ•์€ ์ƒ์œ„(๋ถ€๋ชจ) - ํ•˜์œ„(์ž์‹) ์ปดํฌ๋„ŒํŠธ๊ฐ„์˜ ๋ฐ์ดํ„ฐ ์ „๋‹ฌ ๋ฐฉ๋ฒ•์ด๋‹ค.

๋ถ€๋ชจ์—์„œ ์ž์‹์œผ๋กœ๋Š” props ์†์„ฑ์„ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋‹ค. ์ž์‹์—์„œ ๋ถ€๋ชจ๋กœ๋Š” ๊ธฐ๋ณธ์ ์ธ ์ด๋ฒคํŠธ๋งŒ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋‹ค.

props

props๋Š” ๋ถ€๋ชจ์—์„œ ์ž์‹ ์ปดํฌ๋„ŒํŠธ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ์†์„ฑ์ด๋‹ค.

Vue.component('child-component',{
  props: ['props ์†์„ฑ๋ช…']
});

์ปดํฌ๋„ŒํŠธ ์†์„ฑ์„ ์ •์˜ํ•œ ํ›„ ๋“ฑ๋ก๋œ child-component ์ปดํฌ๋„ŒํŠธ ํƒœ๊ทธ์— v-bind ์†์„ฑ์„ ์ถ”๊ฐ€ํ•œ๋‹ค.

<child-component v-bind:props ์†์„ฑ๋ช… = "์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์˜ data ์†์„ฑ"></child-component>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Sample</title>
</head>
<body>
    <div id="app">
        <child-component v-bind:propsdata="message"></child-component>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('child-component',{
            props: ['propsdata'],
            template: '<p>{{propsdata}}</p>'
        });
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        });
    </script>
</body>
</html>

์ปดํฌ๋„ŒํŠธ ๋“ฑ๋ก๊ณผ ๋™์‹œ์— ๋ทฐ ์ธ์Šคํ„ด์Šค ์ž์ฒด๊ฐ€ ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋˜๊ธฐ ๋•Œ๋ฌธ์— props ์†์„ฑ์„ ํ†ตํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋‹ค.

Emit Events(์ด๋ฒคํŠธ ๋ฐœ์ƒ)

์ž์‹์—์„œ ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๋กœ์˜ ํ†ต์‹ ์€ ์ด๋ฒคํŠธ๋ฅผ ๋ฐœ์ƒ์‹œ์ผœ์„œํ•  ์ˆ˜ ์žˆ๋‹ค. ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์—์„œ ์ž์‹ ์ปดํฌ๋„ŒํŠธ์˜ ํŠน์ • ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์—์„œ ํ•ด๋‹น ์ด๋ฒคํŠธ๋ฅผ ์ˆ˜์‹ ํ•ด ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ๋‹ค.

์ด๋ฒคํŠธ ๋ฐœ์ƒ๊ณผ ์ˆ˜์‹  ํ˜•์‹

์ด๋ฒคํŠธ ๋ฐœ์ƒ๊ณผ ์ˆ˜์‹ ์€ $emit()๊ณผv-on:์†์„ฑ์„ ์‚ฌ์šฉํ•ด ๊ตฌํ˜„ํ•œ๋‹ค.

// event ๋ฐœ์ƒ
this.$emit('์ด๋ฒคํŠธ๋ช…');

$emit()์„ ํ˜ธ์ถœํ•˜๋ฉด ๊ด„ํ˜ธ ์•ˆ์— ์ •์˜๋œ ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉฐ, ์ผ๋ฐ˜์ ์œผ๋กœ $emit()์„ ํ˜ธ์ถœํ•˜๋Š” ์œ„์น˜๋Š” ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ ํŠน์ • ๋ฉ”์„œ๋“œ ๋‚ด๋ถ€์ด๋ฏ€๋กœ ์—ฌ๊ธฐ์„œ this๋Š” ํ•˜์œ„์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค.

<!-- ์ด๋ฒคํŠธ ์ˆ˜์‹  -->
<child-component v-on:์ด๋ฒคํŠธ๋ช…="์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ ๋ฉ”์„ธ์ง€๋ช…"></child-component>

ํ˜ธ์ถœํ•œ ์ด๋ฒคํŠธ๋Š” ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋“ฑ๋กํ•˜๋Š” ํƒœ๊ทธ์—์„œ v-on ์œผ๋กœ ๋ฐ›๋Š”๋‹ค.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Sample</title>
</head>
<body>
    <div id="app">
        <child-component v-on:show-log="printText"></child-component>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('child-component',{
            template: '<button v-on:click="showLog">show</button>',
            methods:{
                showLog: function(){
                    this.$emit('show-log');
                }    
            }

        });
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            },
            methods: {
                printText: function(){
                    console.log('recieved event');
                }
            }
        });
    </script>

</body>
</html>

์ด์™€ ๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ ์ž์‹์—์„œ ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๋กœ ์‹ ํ˜ธ๋ฅผ ์˜ฌ๋ ค๋ณด๋‚ด๋ฉด ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์˜ ๋ฉ”์„œ๋“œ๋ฅผ ์‹คํ–‰ํ•  ์ˆ˜๋„ ์žˆ๊ณ , ์ž์‹ ์ปดํฌ๋„ŒํŠธ๋กœ ๋‚ด๋ ค๋ณด๋‚ด๋Š” props์˜ ๊ฐ’์„ ์กฐ์ •ํ•  ์ˆ˜๋„ ์ž‡๋‹ค.

๊ฐ™์€ ๋ ˆ๋ฒจ ์ปดํฌ๋„ŒํŠธ ๊ฐ„ ํ†ต์‹ 

๋ทฐ๋Š” ์ƒ์œ„์—์„œ ํ•˜์œ„๋กœ๋งŒ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•ด์•ผํ•˜๋Š” ๊ธฐ๋ณธ์ ์ธ ํ†ต์‹  ๊ทœ์น™์„ ๋”ฐ๋ฅด๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ™์€ ๋ ˆ๋ฒจ ์ปดํฌ๋„ŒํŠธ์— ๊ฐ’์„ ์ „๋‹ฌํ•˜๋ ค๋ฉด ํ•˜์œ„์—์„œ ๊ณตํ†ต์ ์ธ ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ๋กœ ์ด๋ฒคํŠธ๋ฅผ ์ „๋‹ฌํ•œ ํ›„ ๊ณตํ†ต ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์—์„œ ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ์— props๋ฅผ ๋‚ด๋ ค ๋ณด๋‚ด์•ผํ•œ๋‹ค. ํ•˜์ง€๋งŒ ์ด๋ ‡๊ฒŒ ํ†ต์‹ ์„ ํ•˜๊ฒŒ๋˜๋ฉด ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ•„์š”์—†์Œ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ๊ฐ™์€ ๋ ˆ๋ฒจ๊ฐ„์˜ ํ†ต์‹ ์„ ์œ„ํ•ด ๊ฐ•์ œ๋กœ ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‘ฌ์•ผํ•œ๋‹ค. ์ด๋Ÿฌํ•œ ์ ์„ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด ์ด๋ฒคํŠธ ๋ฒ„์Šค์ด๋‹ค.

์ด๋ฒคํŠธ ๋ฒ„์Šค - ๊ด€๊ณ„ ์—†๋Š” ์ปดํฌ๋„ŒํŠธ ๊ฐ„ ํ†ต์‹ 

์ด๋ฒคํŠธ ๋ฒ„์Šค๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ์ง€์ •ํ•œ 2๊ฐœ์˜ ์ปดํฌ๋„ŒํŠธ ๊ฐ„์— ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ ๋ฐ›์„ ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค. ์ด๋ฒคํŠธ ๋ฒ„์Šค๋ฅผ ์ด์šฉํ•˜๋ฉด ์ƒ์œ„-ํ•˜์œ„ ๊ด€๊ณ„๋ฅผ ์œ ์ง€ํ•˜์ง€ ์•Š๊ณ  ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ๋กœ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋‹ค.

// ์ด๋ฒคํŠธ ๋ฒ„์Šค๋ฅผ ์œ„ํ•œ ์ถ”๊ฐ€ ์ธ์Šคํ„ด์Šค 1๊ฐœ ์ƒ์„ฑ
var eventBus = new Vue();

์ด๋ฒคํŠธ ๋ฒ„์Šฌ๋ฅด ๊ตฌํ˜„ํ•˜๋ ค๋ฉด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ๋กœ์ง์„ ๋‹ด๋Š” ์ธ์Šคํ„ด์Šค์™€๋Š” ๋ณ„๊ฐœ๋กœ ์ƒˆ๋กœ์šด ์ธ์Šคํ„ด์Šค๋ฅผ ํ•œ๊ฐœ ์ƒ์„ฑํ•ด ์ด๋ฒคํŠธ๋ฅผ ์ฃผ๊ณ ๋ฐ›๋Š”๋‹ค. $emit() ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋‚ด๊ณ , $on()์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›๋Š”๋‹ค.

// ์ด๋ฒคํŠธ๋ฅผ ๋ณด๋‚ด๋Š” component
methods:{
  ๋ฉ”์„œ๋“œ๋ช…: function(){
    eventBus.$emit('์ด๋ฒคํŠธ๋ช…',๋ฐ์ดํ„ฐ);
  }
}

// ์ด๋ฒคํŠธ๋ฅผ ๋ฐ›๋Š” component
methods:{
  created: function(){
    eventBus.$on('์ด๋ฒคํŠธ๋ช…',function(๋ฐ์ดํ„ฐ){
      ...
    });
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Sample</title>
</head>
<body>
    <div id="app">
        <child-component></child-component>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var eventBus = new Vue();
        Vue.component('child-component',{
            template: '<div>ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ ์˜์—ญ. <button v-on:click="showLog">show</button></div>',
            methods:{
                showLog: function(){
                    eventBus.$emit('triggerEventBus',100);
                }
            }
        });

        var app = new Vue({
            el:'#app',
            created: function(){
                eventBus.$on('triggerEventBus',function(value){
                    console.log(value + '๊ฐ’์„ ์ „๋‹ฌ๋ฐ›์Œ');
                });
            }
        });
    </script>

</body>
</html>

show๋ฒ„ํŠผ ํด๋ฆญ์‹œ showLog() ๋ฉ”์„œ๋“œ๊ฐ€ ์‹คํ–‰๋˜๊ณ  eventBus ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ฐœ์ƒํ•œ ์ด๋ฒคํŠธ๋Š” ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์˜ created์— ์žˆ๋Š” eventBus.$on()์—์„œ ์ „๋‹ฌ๋ฐ›๋Š”๋‹ค.

์ด๋ฒคํŠธ ๋ฒ„์Šค๋ฅผ ํ™œ์šฉํ•˜๋ฉด props ์†์„ฑ์„ ์ด์šฉํ•˜์ง€ ์•Š๊ณ ๋„ ์›ํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ ๊ฐ„์— ์ง์ ‘์ ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์–ด ํŽธ๋ฆฌํ•˜์ง€๋งŒ, ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งŽ์•„์ง€๋ฉด ์–ด๋””์„œ ์–ด๋””๋กœ ๋ณด๋ƒˆ๋Š”์ง€ ๊ด€๋ฆฌ๊ฐ€ ๋˜์ง€ ์•Š๋Š” ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค. ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋ ค๋ฉด ๋ทฐ์—‘์Šค(Vuex)๋ผ๋Š” ์ƒํƒœ ๊ด€๋ฆฌ ๋„๊ตฌ๊ฐ€ ํ•„์š”ํ•˜๋‹ค.

Last updated

Was this helpful?