JAVASCRIPT

Component With Both Data And Props

App.vue
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
import Test from './components/Test.vue'
</script>

<template>
  <Test msg="xxxxx" />
</template>

Test.vue

<script>
export default {
  data() {
    return {
      titleClass: 'title'
    }
  }
}
</script>

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


<template>
  <h1 :class="titleClass">{{titleClass}}</h1>
  {{msg}}
</template>