Vue 3에서 사용자 지정 확인란 구성 요소 만들기(더 나은 접근 방식)

기본적으로 vue의 v-model 속성이 있는 입력 체크박스 태그를 사용하여 체크박스를 만들면 다음과 같은 몇 가지 추가 기능이 제공됩니다here. 이것을 별도의 파일로 추출하려고 시도하면 상자에서 나오는 이러한 추가 기능이 느슨해집니다.

번거로움 없이 사용자 지정 체크박스 구성 요소를 만드는 간단한 튜토리얼 가이드입니다.

먼저 구성 요소를 저장할 vue 파일을 만들어야 하며 이 자습서에서는 CustomCheckbox.vue 를 사용합니다. 원하는 이름을 사용할 수 있습니다.

//CustomCheckbox.vue Script Setup approach

<template>
  <input type="checkbox" v-model="model" :value="value" />
  <span>{{ label }}</span>
</template>

<script setup >
import { computed, defineEmits } from "vue";
const props = defineProps({
  modelValue: { type: [Array, Boolean] },
  value: { type: [Boolean, Object] },
  label: { type: String },
});
const emit = defineEmits(["update:modelValue"]);
const model = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});
</script>

옵션 API를 선호하는 경우 아래로 이동할 수 있습니다.

//CustomCheckbox.vue Options api approach

<template>
  <input type="checkbox" v-model="model" :value="value" />
  <span>{{ label }}</span>
</template>

<script >
  export default {
    props:{
      modelValue: { type: [Array, Boolean] },
      value: { type: [Boolean, Object] },
      label: { type: String }
    },
    computed:{
      model:{
         get() {
            return this.modelValue;
          },
          set(value) {
            this.$emit("update:modelValue", value);
          }
      }
    }
  }
</script>

구성 요소가 있으면 간단히 가져와서 다음과 같이 구현할 수 있습니다.

//File that needs to use the component 

<template>
  <p>
    Using the custom checkbox with an array
  </p>
  <p>{{ selectedPeople }}</p>

  <template v-for="person in people" key="person.name" >
  <CustomCheckbox :label="person.name" v-model="selectedPeople" :value="person" />
  </template>

 <br> 
 <p>  Using the custom checkbox as stand alone </p>
 <CustomCheckbox  :label="`I am checked: ${isSelected}`" v-model="isSelected"  />
</template>

<script setup>
import { ref } from 'vue'
import CustomCheckbox from "./CustomCheckbox.vue"

const people = ref([
  {
    name:"William",
    age: 30,
    sex: "Male"
  },
  {
    name:"Thomas",
    age: 24,
    sex: "Male"
  },
   {
    name:"Jennifer",
    age: 20,
    sex: "Female"
  }
]);

const selectedPeople = ref([]);
const isSelected= ref(false);
</script>

이 접근 방식에서는 사용자 지정 구성 요소가 개체 및 배열과 함께 작동하도록 하기 위해 추가 코드를 작성할 필요가 없습니다.