Vue.js 기초 파트 7 | 소품

오늘은 Vue.js에서 props에 대해 이야기해보겠습니다.

Vue.js 기본 시리즈의 7부입니다. 6부를 읽으려면 클릭하세요.

에서 언급했듯이 Vue 구성 요소를 재사용할 수 있습니다. 하지만 왜 같은 것을 재사용하고 싶습니까? 데이터를 동적으로 보내고 데이터를 반복하여 마치 다른 것처럼 보이게 할 수 있기 때문입니다. 다만 오늘은 부모 컴포넌트에서 자식 컴포넌트로 props 보내는 방법에 대해서만 이야기하겠습니다.

상위 구성 요소의 코드는 다음과 같습니다.

    <script>
    import ChildComp from './ChildComp.vue'

    export default {
    components: {
        ChildComp
    },
    data() {
        return {
        greeting: 'Hello from parent'
        }
    }
    }
    </script>

    <template>
    <ChildComp :msg="greeting"/>
    </template>

먼저 구성 요소를 다음과 같이 가져옵니다. import ChildComp from './ChildComp.vue' , 구문을 기억하십시오 import <something> from <path> . 이후 import된 컴포넌트를 components 옵션에 등록합니다.

components: {
    ChildComp
  },

그런 다음 data 의 값만 있는 greeting: 'Hello from parent' 가 있습니다. 문자열이라는 것을 알 수 있습니다. 우리는 이 prop을 하위 구성 요소의 데이터 유형으로 등록해야 합니다. 데이터 유형에 대한 질문이 있는 경우 this을 읽어 보십시오.

마지막으로 부모 구성 요소에는 <ChildComp :msg="greeting"/> 가 있습니다. :msg="greeting" 이것이 '소품'입니다. 기억하다? :는 v-bind:를 나타냅니다. 따라서 소품을 바인딩하고 이 경우 '데이터'에서 greeting를 전달합니다.

다음은 자식 구성 요소입니다.

    <script>
    export default {
    props: {
        msg: String
    }
    }
    </script>

    <template>
    <h2>{{ msg || 'No props passed yet' }}</h2>
    </template>

위의 코드에서 볼 수 있듯이 props 라는 새 속성이 있습니다. 소품이 등록되는 곳입니다. 부모 구성 요소에서 :msg=''를 사용했으며 여기에서 :msg 소품이 나옵니다. 여기에서 문자열로 만들었기 때문에 데이터 유형은 문자열입니다( msg: String ).

마지막으로 하단에 이 코드 줄이 있습니다<h2>{{ msg || 'No props passed yet' }}</h2>. 이 부분은 실제로 JavaScript입니다. 요컨대, || 이 또는 연산자는 조건을 만족하는 모든 항목을 표시합니다. 이 경우 진실한 것은 무엇이든 표시합니다. 부모 구성 요소에서 자식 구성 요소로 소품을 전달하기 전에 msg는 거짓입니다. 따라서 코드는 'No props passed yet'를 표시합니다(진실이므로). 그러나 부모 구성 요소에서 전달된 props는 부모의 데이터에 greeting를 표시합니다(이 경우 문자열이 있고 진실이기 때문). 즉 'Hello from parent'입니다.

요약하자면, 오늘 우리는 부모 컴포넌트에서 자식 컴포넌트로 소품을 전달하는 방법에 대해 이야기했습니다. 이를 위해 하위 구성 요소에 소품( props: {} )을 등록합니다. 소품 이름과 데이터 유형을 제공합니다( props: { msg: String } ). 마지막으로 부모 구성 요소( greeting: 'Hello from parent' )에 값을 지정하고 부모 구성 요소에서 자식 구성 요소( <ChildComp :msg="greeting"/> )로 props로 전달합니다.


파트 7은 여기까지입니다. 다음으로 Vue에서 방출을 살펴보겠습니다.