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

์ƒ์œ„์—์„œ ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ๋กœ ๋ฐ์ดํ„ฐ ์ „๋‹ฌํ•˜๊ธฐ : props

by ์ฝ”๋”ฉํ•˜๋Š” ๋ถ•์–ด 2022. 6. 5.
๋ฐ˜์‘ํ˜•

props๋ž€?

์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์—์„œ ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ์†์„ฑ

 

<!DOCTYPE html>
<head>
  <title>Vue Component Registration</title>
</head>
<body>
  <div id="app">
    <child-component v-bind:propsdata="message"></child-component2>
  </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! passed from Parent Component"
      }
    })
  </script>
</body>
</html>

 

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

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

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

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€

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