개발일지 Day 2

Vue

slot

공통된 스타일이 적용된 컴포넌트를 만들기 위해 slot을 사용해볼 수 있을까?
실패

h1, p요소는 slot을 통해 ParentComponent 내부에 들어오는 것 같지만, ParentComponent에 있는 요소가 아니기 때문에 scoped로 설정된 스타일이 적용되지 않는다.

ChildComponent

<template>
  <ParentComponet>
    <h1>Text</h1>
    <p>TextText</p>
  </ParentComponent>
</template>

ParentComponent

<template>
  <div>
    <slot></slot>
  </div>
</template>

<style scoped>
h1 {
  //...
}

p {
  // ...
}
</style>

select & v-model

vue에서 select를 사용하려면?

한 컴포넌트 내에 데이터와 렌더링을 함께 진행할 때

<div id="v-model-select" class="demo">
  // v-model을 통해 데이터와 연결
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

부모 컴포넌트와 자식 컴포넌트 사이

// 부모 컴포넌트
<template>
  <ChildComponent :cityList="cityList" @update:city="handleUpdateCity" />  
</template>

// 자식 컴포넌트
<template>
  <select @change="handleChange">
    <option v-for="city in cityList" :key="city" :value="city">
      {{ city }}
    </option>
  </select>
</template>
<script>
export default {
  props: {
    cityList: Array,
  },
  emit: ["update:city"],
  setup(_, { emit }) {
    const handleChange = (event) => {
      emit("update:city", event.target.value)
    }
  },
}      
</script>

Select의 arrow를 커스텀하고 싶다면?

<template>
  <div class="select-wrapper">
    <select @change="handleChange">
      <option disabled :value="field.placeholder"></option>
      <option v-for="item in field.options" :key="item" :value="item">
        {{ item }}
      </option>
    </select>
    <span class="material-icons icon">expand_more</span>
  </div>
</template>

tailwindCSS 사용

.select-wrapper {
  @apply relative;

  select {
    /* select의 화살표를 없애는 코드 */
    -moz-appearance: none; /* Firefox */
    -webkit-appearance: none; /* Safari and Chrome */
    appearance: none;
    @apply border border-gray-400 rounded py-2 px-4 w-full outline-none;

    &:focus {
      @apply ring-2 ring-blue-500;
    }

    &.error {
      @apply border-red-500 bg-red-50;
    }
  }

  .icon {
    transform: translateY(-50%);
    @apply absolute top-1/2 right-2;
  }
}