공통된 스타일이 적용된 컴포넌트를 만들기 위해 slot을 사용해볼 수 있을까?
실패
h1
, p
요소는 slot
을 통해 ParentComponent 내부에 들어오는 것 같지만, ParentComponent에 있는 요소가 아니기 때문에 scoped
로 설정된 스타일이 적용되지 않는다.
<template>
<ParentComponet>
<h1>Text</h1>
<p>TextText</p>
</ParentComponent>
</template>
<template>
<div>
<slot></slot>
</div>
</template>
<style scoped>
h1 {
//...
}
p {
// ...
}
</style>
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>
<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;
}
}