๐Ÿ“• Language/Vue

[Age of Vue] Vue.js ์‹œ์ž‘ํ•˜๊ธฐ - 18. ์ปดํฌ๋„ŒํŠธ ํ†ต์‹  ๋ฐฉ์‹ - ์‘์šฉ

a n u e 2022. 5. 6. 23:02

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

- ์ƒํ•˜์œ„ ๊ฐ„ ์ปดํฌ๋„ŒํŠธ ํ†ต์‹ ์ด ์•„๋‹Œ, ๊ฐ™์€ ๋ ˆ๋ฒจ ์ปดํฌ๋„ŒํŠธ ๊ฐ„์˜ ํ†ต์‹ ์€ ์–ด๋–ป๊ฒŒ ํ•ด์•ผํ• ๊นŒ?

๊ฐ™์€ ๋ ˆ๋ฒจ๋ผ๋ฆฌ๋Š” ๋ฐ”๋กœ ํ†ต์‹ ํ•  ์ˆ˜ ์—†์œผ๋‹ˆ, ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์ธ Root๋กœ ์˜ฌ๋ฆฌ๊ณ (event), Root์—์„œ ๋‚ด๋ ค์•ผํ•œ๋‹ค(props).

[Root]
[AppHeader]  ←  [AppCotent]

<!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">
        {{ str }}
        <app-header v-bind:propsdata="num"></app-header>
        <!-- 2. ์˜ฌ๋ผ์˜จ pass event๋ฅผ v-on์œผ๋กœ ๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค. -->
        <!-- ๊ทธ๋ฆฌ๊ณ  pass event๋ฅผ ๋ฐ›์œผ๋ฉฐ ์ˆ˜ํ–‰ํ•  function์„ ์„ ์–ธํ•  ์ˆ˜ ์žˆ๋‹ค.
            app-content์˜ ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ ์ฆ‰, Root์—์„œ ์‹คํ–‰ ํ•  method๋ฅผ ์„ ์–ธ.
            deliverNum(value)์œผ๋กœ, value์— ์•Œ์•„์„œ ๊ฐ’์ด ๋“ค์–ด๊ฐ€๊ฒŒ๋”
             ์•”๋ฌต์ ์œผ๋กœ ์„ ์–ธ์ด ๋œ๋‹ค -->
        <app-content v-on:pass="deliverNum"></app-content>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var appHeader = {
            template : '<div>header</div>',
            props : ['propsdata']
        }
        var appContent = {
            template : '<div>content<button v-on:click="passNum">pass</button></div>',
            methods : {
                passNum : function() {
                    // 1. pass๋ผ๋Š” ์ด๋ฆ„์˜ event๊ฐ€ Root๋กœ ์˜ฌ๋ผ์˜ด
                    this.$emit('pass', 10);
                }
            }
        }
        //Root
        //์—ฌ๊ธฐ์— data๋ฅผ ์„ ์–ธํ•ด์•ผ ์•„๋ž˜๋กœ propsํ•  ์ˆ˜ ์žˆ๋‹ค.
        new Vue(
            {
                el : '#app',
                data : {
                   num : 0
                },
                components : {
                    'app-header' : appHeader,
                    'app-content' : appContent
                },
                methods : {
                                          //์ธ์ž value=10์˜๋ฏธ
                    deliverNum : function(value) 
                    {   //3. this.num์ด 10์ด ๋˜์—ˆ๋‹ค.
                        //์ด ๋ฐ์ดํ„ฐ๋ฅผ appHeader๋กœ ์ „๋‹ฌํ•ด์ฃผ๋ฉด, ๊ฐ™์€ ๋ ˆ๋ฒจ์˜ ๋ฐ์ดํ„ฐ ์ „์†ก ์™„๋ฃŒ
                        this.num = value;
                    }
                }
            }
        )
    </script>
</body>
</html>