You can use interpolation binding, via mustache syntax like Angular, to bind the template to component data. In the following example, let's implement a child component that greets a person's name that the parent component should be passing in:

<template>
  <span>Hello {{ greet }}</span>
</template>
 
<script>
export default {
  name: 'Child',
  props: {
    greet: String,
  },
}
</script>

In the preceding code, the Child component binds the greet prop and writes it to the span's inner text.

Importantly, the template expression context is set to the component instance, referred to usually as the viewmodel. In this context, you should be able to access props, data, methods, and computed properties implicitly from the template.

Now, let's write the Parent component, which passes down the necessary prop as follows:

<template>
  <div>
    <Child greet="John Doe" />
  </div>
</template>
 
<script>
import Child from './Child.vue';
 
export default {
  name: 'Parent',
  components: {
    Child,
  },
}
</script>

As you can see in the preceding code, props are passed in simply as element attribute assignments.