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 ...