nicodevs/3.bar.md

## 3.bar.md

      
    Raw
  

              3.bar.md
            
          
    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>