vue 3 composition emit code example

Example 1: vue 3 emits

<template>
  <div>
    <p>{{ text }}</p>
    <button v-on:click="$emit('accepted')">OK</button>
  </div>
</template>
<script>
  export default {
    props: ['text'],
    emits: ['accepted']
  }
</script>

Example 2: vue emit composition api

// App.vue
<template>
  <div id="app" style={{ width: widthPixel, height: heightPixel }}>
    dynamic window size: {width}, {height}
  </div>
</template>

<script>
import { watch } from '@vue/composition-api'

export default {
  setup(props, { emit }) {
    const { width, height, widthPixel, heightPixel } = useWindowSize()

    watch(() => {
      emit('window-width-changed', width)
    })
    
    return { width, height, widthPixel, heightPixel }
  }
}
</script>