Webview 플젝의 tab ui component를 보다가...
model option이 뭐지...?
기본적으로 v-model은 value라는 props를 input이라는 이벤트에 의해 변형시켜 양방향 바인딩을 하게 된다
그런데 input이 아닌 다른 이벤트에 따라 v-model을 바인딩 하고 싶다면 어떻게 할까?
// 부모 compo
<ui-tab :tabs="tabs" v-model="selectedTab" />
// 자식 compo
<input
type="radio"
name="tab-group"
:id="`hb-tab-${tab.id}`"
@click="handleClickTab(tab.id)"
:checked="selectedTab === tab.id"
:disabled="tab.disabled"
/>
// 여기선 걸린 이벤트가 click이지만 change로 해도 잘 된다.
// input의 value(true or not)가 change 됐건 둘다 같은 상황(버튼 클릭)이기 때문.
<script>
export default {
name: "hb-tab",
// model이라는 option을 사용해서 v-model의 props 값을 custom 한다.
// prop명은 value -> selectedTab (value로 써도 되지만 명확하게 하기 위해)
// event는 input -> change
model: {
prop: "selectedTab",
event: "change",
},
props: {
// ** 여기서 model에서 명시한 prop을 반드시 정의해야 함. **
selectedTab: {
type: [Number, String],
},
tabs: {
type: Array,
default: function () {
return [];
},
},
},
methods: {
// change가 발생할때 부모 compo의 selectedTab 값을 tab.id로 바꾸기
handleClickTab(val) {
this.$emit("change", val);
},
},
};
</script>
팀원분에게 잘못 알려드린거 같아 내일 꼭 다시 말씀드려야겠다...