vue3 컴포지션 API를 사용할 때 스크립트 태그의 설정을 활용하여 향후 유지 관리가 쉬운 상용구 코드를 적게 작성할 수 있습니다.

모든 최상위 바인딩은 템플릿 태그에서 직접 사용할 수 있습니다. 이 예를 참조하십시오.

<script setup>
// variable
const msg = 'Hello!'

// functions
function log() {
  console.log(msg)
}
</script>

<template>
  <div @click="log">{{ msg }}</div>
</template>

이것은 코드를 더 읽기 쉽게 만드는 데는 좋지만 단점도 있습니다. setup 속성이 있는 스크립트 태그 내에서 비활성화할 수 없는 가장 두드러진 무능력attribute inheritance.

따라서 설정을 사용하여 속성 상속을 비활성화하려면 두 개의 스크립트 태그를 추가해야 합니다.

<script>
// use normal <script> to declare options
export default {
  inheritAttrs: false
}
</script>

<script setup>
// ...setup logic
</script>

이것은 잘 작동하지만 더 적은 상용구 코드를 작성하려는 목적을 무시합니다.

놀라운 빌드 도구인 vite 을 사용하여 여분의 <script> 선언을 생략할 수 있는 플러그인을 개발했습니다.

새 구문은 다음과 같습니다.

<script setup inherit-attrs="false">
// ...setup logic
</script>

그리고 그게 다야. 플러그인은 <script> 와 함께 두 번째inheritAttrs: false 태그를 자동으로 추가합니다.

여기에서 플러그인, 설치 및 구성 단계를 찾을 수 있습니다.

kalimah 앱 / vite-plugin-vue-setup-inherit-attrs

vite를 사용하여 vue3에 대한 상속 속성 지원 추가

vite-plugin-vue-setup-inherit-attrs

vite를 사용하여 vue-setup에서 inheritAttrs에 대한 지원 추가

설치

npm install vite-plugin-vue-setup-inherit-attrs -D

용법

vite.config.ts에서 플러그인을 가져오고 플러그인 배열을 추가합니다.

import { defineConfig, Plugin } from 'vite'
import vue from '@vitejs/plugin-vue'
import inheritAttrs from 'vite-plugin-vue-setup-inherit-attrs';

export default defineConfig({
  plugins: [vue(), inheritAttrs()],
})

뷰 템플릿에서 추가inherit-attrs="false":

<template>
  <div class="root-element">
      <div class="nested-element" v-bind="$attrs">
          $attrs will be added to this element instead of the root element
      </div>
  </div>
</template>

<script lang="ts" setup inherit-attrs="false">
  // code here
</script>

구성

구성이 필요하지 않습니다 :)

특허

MIT License


View on GitHub