v-model custom

박경준·2022년 7월 5일
0

신용점수

목록 보기
7/7

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>

vue2 참고 문서

팀원분에게 잘못 알려드린거 같아 내일 꼭 다시 말씀드려야겠다...

profile
빠굥

0개의 댓글