Skip to content

Instantly share code, notes, and snippets.

@nicodevs
Last active March 15, 2023 13:06
Show Gist options
  • Save nicodevs/7a668d4b2c00389dd7f315f8f558ef5c to your computer and use it in GitHub Desktop.
Save nicodevs/7a668d4b2c00389dd7f315f8f558ef5c to your computer and use it in GitHub Desktop.
MCQs

How would you write this code in options API?

<script setup>
defineProps({
  msg: String,
})
</script>

<template>
  <h1>{{ msg }}</h1>
</template>

Quick tip: Remember chapter 1 of the Training Guide 😉

Correct

By making use of defineProps inside a setup function:

<template>
  <h1>{{ msg }}</h1>
</template>

<script>
import { defineProps } from 'vue';

export default {
  setup(props) {
    defineProps({
      msg: String,
    });

    return {
      msg: props.msg
    };
  }
};
</script>
Correct

By using the props option:

<template>
  <h1>{{ msg }}</h1>
</template>

<script>
export default {
  props: {
    msg: {
      type: String,
      required: true,
    },
  },
}
</script>
Incorrect

By assigning the return value of defineProps to a const:

<script setup>
const props = defineProps({
  msg: String,
})
</script>

<template>
  <h1>{{ msg }}</h1>
</template>
Incorrect

By using the data method:

<template>
  <h1>{{ msg }}</h1>
</template>

<script>
export default {
  data () {
    return {
      msg: ''
    }
  }
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment