vue prop string or number

1. Create a child component in Vue:

<template>
  <div>
    <!-- Child component content -->
  </div>
</template>

<script>
export default {
  props: {
    propString: String,
    propNumber: Number
  },
  // Other component options and methods
}
</script>

1. Use the child component in a parent component:

<template>
  <div>
    <child-component :propString="stringValue" :propNumber="numberValue" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      stringValue: 'Hello',
      numberValue: 42
    };
  },
  // Other component options and methods
}
</script>

1. Pass string and number values as props from the parent component:

<template>
  <div>
    <child-component :propString="stringValue" :propNumber="numberValue" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      stringValue: 'Hello',
      numberValue: 42
    };
  },
  // Other component options and methods
}
</script>

1. Access and use the props in the child component:

<template>
  <div>
    <p>String Prop: {{ propString }}</p>
    <p>Number Prop: {{ propNumber }}</p>
  </div>
</template>

<script>
export default {
  props: {
    propString: String,
    propNumber: Number
  },
  // Other component options and methods
}
</script>