props 흐름구조

props 흐름구조

1. 상위 vue에 하위 vue를 불러와준다
import TheAbout from './components/TheAbout.vue'

2. 상위 vue에 등록해준다
export default {
  name: 'App',
  // 2.등록하기(register)
  components: {
    TheAbout,
  },
 
}

3. 보여준다.

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
   <!-- 3. 보여주기(print) -->
   <!-- 카멜 케이스 -->
    <TheAbout my-message="CamelCase"/>
    <!-- 케밥 케이스 -->
   <the-about my-message="kebab-case"></the-about>
  </div>
</template>

4. props로 받아온 사실을 하위 vue에 등록시켜준다.

<script>
export default {
  name: 'TheAbout',
  // 하위 뷰에 props 등록 (instance명은 camelcase로 지어줌)
  props: {
    myMessage: String // 이부분
  }
}
</script>

5. 하위 html에서도 이젠 상위vue의 것을 사용가능

<template>
    <!-- 상위 vue의 my-message를 myMessage로 사용가능 -->
  <h1>{{ myMessage }}</h1> 
</template>

표현하는데 있어 등록된 데이터를 꺼내오는 방식중 바인딩이 있다면

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
   <!--  보여주기(print) -->
   
   <!-- 카멜 케이스 -->
   <!-- my-message를 data function의 리턴값을 사용하고 싶다면 :을 써서 바인딩 해주어야 함 -->
    <TheAbout :my-message="parentsData"/>
    
    <!-- 케밥 케이스 -->
    <!-- 이부분은 바인딩을 하지 않음 -->
   <the-about my-message="kebab-case"></the-about>
  </div>
</template>

<script>
// 불러오기(import)
import TheAbout from './components/TheAbout.vue'

export default {
  name: 'App',
  // 등록하기(register)
  components: {
    TheAbout,
  },
  // 이부분에서 주의할 점은 data는 function의 꼴만 가져야 한다 라는 점!
  data: function () {
    return {
      parentsData: 'This is parent data to child component'
    }
  }
}
</script>