vue prop using variable

<template>
  <div>
    <h1>{{ message }}</h1>
    <ChildComponent :passedProp="message" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: 'Hello, world!',
    };
  },
};
</script>

Explanation:

1. The <template> section defines the structure of the component.
2. Inside the <div>, there's an <h1> tag that displays the value of the message data property using {{ message }}.
3. <ChildComponent :passedProp="message" /> passes the message data property as a prop named passedProp to the ChildComponent.
4. The <script> section imports the ChildComponent from its file.
5. The Vue component definition includes ChildComponent in the components object.
6. data() is a function returning an object with a property message initialized to 'Hello, world!'.