[Vue3] optionsAPI / compositionAPI(script setup) 비교 예제

 

1. 기본 클릭 이벤트 정보 출력 (event.clientX, event.target, 등)

 

- optionsAPI

<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log(event.clientX);
    }
  }
}
</script>

 

- script setup

<template>
  <button @click="handleClick">Click me</button>
</template>

<script setup>
function handleClick(event) {
  if (event.ctrlKey) {
    console.log(event.clientX);
  }
}
</script>

 

 

 

optionsAPI, compositionAPI의 script setup 비교

 

1-1 버튼 클릭시 count 1씩 증가 예제

 

 

 

- script setup

<template>
  <button @click="handleClick">Click me ({{ count }})</button>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)

function handleClick(event) {
  count.value++
  console.log(`X: ${event.clientX}, count: ${count.value}`)
}
</script>

 

 

- optionsAPI

<template>
  <button @click="handleClick">Click me ({{ count }})</button>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    function handleClick(event) {
      count.value++
      console.log(`X: ${event.clientX}, count: ${count.value}`)
    }

    return {
      count,
      handleClick
    }
  }
}
</script>

 

 

 

1-2 버튼 클릭할 때  "철수" 값을 매개변수로 전달하는 예제

 

 

- script setup

<template>
  <button @click="sayHello('철수')">Say Hello</button>
</template>

<script setup>
function sayHello(name) {
  console.log(`안녕, ${name}!`)
}
</script>

 

 

 

- optionsAPI

매개변수를 함수 안에서 직접 넘기는 방식

<template>
  <button @click="sayHello('철수')">Say Hello</button>
</template>

<script>
export default {
  setup() {
    function sayHello(name) {
      console.log(`안녕, ${name}!`)
    }

    return {
      sayHello
    }
  }
}
</script>

 

아니면

optionsAPI 에서 data()에 정의된 데이터를 함수에 넘겨주는 방식

<script>
export default {
  data() {
    return {
      name: '철수'
    }
  },
  methods: {
    sayHello(name) {
      console.log(`안녕, ${name}!`)
    }
  }
}
</script>

---

 

 

2. 링크 이동 막기 (preventDefault)

<template>
  <a href="https://example.com" @click="stopLink">Go to Example</a>
</template>

<script setup>
function stopLink(event) {
  event.preventDefault();
  console.log('링크 클릭했지만 이동은 막음');
}
</script>

 

 

 

 

3. 이벤트 전파 막기 (stopPropagation)

<template>
  <div @click="outerClick">
    <button @click.stop="innerClick">Click Me</button>
  </div>
</template>

<script setup>
function outerClick() {
  console.log('Div clicked!');
}

function innerClick() {
  console.log('Button clicked!');
}
</script>

 

 

 

 

참고: 매개변수와 $event 같이 쓰기

<template>
  <button @click="read('철수', $event)">Read</button>
</template>

<script setup>
function read(name, event) {
  console.log('name:', name);
  console.log('event:', event);
}
</script>