【Vue】빠른 사용

<script setup>은


Vue v3.2부터 사용할 수 있는 문법.
요점은 다음과 같다.
  • SFC(Single File Component)에서 사용
  • 일반적인 <script>보다 적은 설명으로 완성할 수 있다
  • 서법


    이전의 서법


    <script>
    import { defineComponent } from 'vue';
    
    export default defineComponent({
      setup(){
        console.log('hello');
      }
    })
    </script>
    

    script setup 쓰기 사용


    <script setup>
      console.log('hello');
    </script>
    
    이거 정말 시원하고 시원해요.defineComponent 읽을 필요도 없이 전체적인 기술량이 줄어든 것을 알 수 있다.

    응용 프로그램


    이렇게 하면 기술을 완전히 생략할 수 있다. "emits와props는 어디에 쓰입니까?"내 생각에도 이런 의문이 있다.
    <script setup>
    const props = defineProps({
      name: String
    })
    const emit = defineEmits(['onChange']);
    </script>
    
    에 관해서는 definePorpsdefineEmits를 사용하면 OK.definePorpsdefineEmitsdefineComponent처럼 특별히 import할 필요가 없으며script setup내에서 기본적으로 사용할 수 있다.

    좋은 웹페이지 즐겨찾기