๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
JavaScript/Vue

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

by ์ฝ”๋”ฉํ•˜๋Š” ๋ถ•์–ด 2022. 6. 5.
๋ฐ˜์‘ํ˜•
<!DOCTYPE html>
<head>
  <title>Vue Component Registration</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>

 

Vue์˜ ๊ฒฝ์šฐ ์ปดํฌ๋„ŒํŠธ๋กœ ํ™”๋ฉด์„ ๊ตฌ์„ฑํ•˜๊ธฐ๋•Œ๋ฌธ์— ๊ฐ™์€ ์›น ํŽ˜์ด์ง€๋ผ๋„ ๋ฐ์ดํ„ฐ๋ฅผ ๊ณต์œ ํ•  ์ˆ˜ ์—†๋‹ค.

๋ฐ˜์‘ํ˜•
์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€

'JavaScript > Vue' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

ํ•˜์œ„์—์„œ ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ๋กœ ์ด๋ฒคํŠธ ์ „๋‹ฌํ•˜๊ธฐ : $emit  (0) 2022.06.05
์ƒ์œ„์—์„œ ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ๋กœ ๋ฐ์ดํ„ฐ ์ „๋‹ฌํ•˜๊ธฐ : props  (0) 2022.06.05
์ธ์Šคํ„ด์Šค ์œ ํšจ ๋ฒ”์œ„์™€ ์ง€์—ญ ์ปดํฌ๋„ŒํŠธ, ์ „์—ญ ์ปดํฌ๋„ŒํŠธ ๊ฐ„ ๊ด€๊ณ„  (0) 2022.06.05
Component  (0) 2022.06.05
Vue Instance Lifecycle  (0) 2022.06.05

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”