상위에서 하위 컴포넌트로 데이터 전달하기 : props

JavaScript/Vue

상위에서 하위 컴포넌트로 데이터 전달하기 : props

코딩하는 붕어 2022. 6. 5. 11:35

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>

저작자표시 비영리 변경금지 (새창열림)