Interpolation binding

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

Get Hands-On Full-Stack Web Development with ASP.NET Core now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.