Components(1)

나눠져 있는 섹션들을 다른 파일로 구분해서 따로 관리를 한다. 

한 화면을 만들기 위해서 각각의 화면을 분리하여 필요할 때 사용한다. 

자주 사용되는 내용의 컴포넌트는 별도의 파일로 분리하고 해당 부분만 불러와서 사용할 수 있는것이 컴포넌트이다. 

 

[컴포넌트 규칙]

components 이름 작성 방법

- import 시에도 컴포넌트 명 작성시 지켜야할 규칙

1. 의미가 있는 단어의 네이밍

2. 2가지의 단어가 조합된 네이밍

3. 대문자로 시작하고, 카멜케이스로 작성한다.

 

[vue파일에서 style scope]

- 해당 파일에서만 적용 가능한 style로 scope를 줌

 

---

 

 

컴포넌트로 props 넘기는 방법

 

정적 데이터 전송 :

username이 넘겨주고자 하는 값은 name인 string 데이터이다.

데이터를 전송할 때는 테이터이름="전송 데이터" 의 형태로 보내준다. 

<GreetingUser username="name" />

 

 

 

동적 데이터 전송:

v-bind를 사용해서 username에 data값을 전달하고 있다. 
username 데이터 값은 아래 버튼 이벤트를 통해서 값이 변경되는 동적 데이터이다. 

<template>
  <GreetUser :username="username"/>
  <button @click="changeUserName">change Name</button>
</template>

<script>
import GreetUser from "./components/architecture/GreetUser.vue";
export default {
  name: "App",
  components: { GreetUser },
  data() {
    return {
      username: "lalala",
    };
  },
  methods: {
    changeUserName () {
      this.username = 'dubidubi'
    }
  }
};
</script>

 

 

props 정의하기

props를 선언하는 방식은 여러개가 있는데, 어떠한 객체인지 명시적으로 알려주는것이 좋다.

type을 지정해주고 default도 설정해준다. 넘기지 않은 props은 default값이 지정된다. 

<template>
  <div>hello{{username}}</div>
</template>

<script>
export default {
  name: "GreetUser",
  props: {
  	username: String, //기본값 명시 안함
    username:{
      type: String,
      default: 'user!!'
    }
  },
  data(){
    return {
      newName: ''
    }
  },
};
</script>

 

[props 정의]

*주의할 점*
배열과 오브젝트는 빈 객체, 빈 배열을 default로 설정해주는 것이 아닌 반드시 함수형태로 작성해줘야 한다. 

만약 props의 data초기 값이 undefined였을 때 오류를 방지할 수 있다. 

<template>
  <GreetUser :username="username" :siteInfo="siteInfo"/>
</template>

<script>
import GreetUser from "./components/architecture/GreetUser.vue";
export default {
  name: "App",
  components: { GreetUser },
  data() {
    return {
      username: "lalala",
      // siteInfo: {
      //   name: 'vue practice',
      //   teacher: 'i dont know',
      //   subject: 'frontend'
      // }
      siteInfo: undefined
    };
  },
  methods: {
  }
};
</script>

 

//GreetUser.vue

<template>
  <p>{{siteInfo.teacher}}</p>
</template>

...
props: {
    username: String,
    age: {
      type : Number,
      default: '0'
    },
    siteInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },

 

 

non-props 속성 넘겨주기

<!-- App.vue -->
<GreetingUser id="greeting" />

GreetingUser 컴포넌트에서는 요소를 감싸고 있는 태그에 id값이 부여되게 된다. 

 

만약, 감싸고 있는 요소에 id값을 받고 싶지 않다면?

script default에 아래 해당 속성을 추가해서 attrs속성을 상속받지 않겠다는 표시를 한다. 

  inheritAttrs: false,

 

그렇다면 감싼 요소 말고 하위 자식 태그에 attrs 속성을 부여하고 싶을땐?

해당 데이터를 prop 받고 싶은 태그에 v-bind="$attrs"를 지정해준다. 

<template>
  <div>
    <div v-bind="$attrs">hello{{username}}</div>
  </div>
</template>

 

 

 

---

 

직접 props 만들어보기

app.vue

<template>
  <div>    
    <ProductList :products="products" />
  </div>
</template>

<script>
import ProductList from "./components/architecture/ProductList.vue";
export default {
  name: "App",
  components: { GreetUser },
  data() {
    return {
      products: [
        {id:1, name: 'tv', price: 5000, company: 'LG'},
        {id:2, name: '리모컨', price: 2000, company: '삼성'},
        {id:3, name: '컴퓨터', price: 3000, company: '대우'},
        {id:4, name: '에어컨', price: 4000, company: '한화'},
      ]


    };
  },
};
</script>

 

//ProductList.vue

<template>
  <ul>
      <Product v-for="product in products" :key="product.id" :product="product"/>
  </ul>
</template>

<script>
  import Product from '../item/ProductItme.vue'
  export default {
    name: "product-list",
    components: {Product},
    props: {
      products: {
        type: Array,
        default:() => {return []}
      }
    }
  }
</script>

 

//ProductItme.vue


<template>
  <div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">{{product.name}}</h5>
    <img :src="`https://placeimg.com/200/100/${product.id}`" :alt="product.name">
    <p class="card-text">{{product.price}}</p>
    <p class="card-text">{{product.company}}</p>
  </div>
</div>
</template>

<script>
export default {
  name: 'product-item',
  props: {
    product: Object
  }
}
</script>