You can use property bindings to bind template elements' properties to component's data. A property binding can be applied using the syntax: property="expression", as shown in the following example:
<template>
<div>
<Child :greet="'John Doe'" />
</div>
</template>
<script>
import Child from './Child.vue';
export default {
name: 'Parent',
components: {
Child,
},
}
</script>
In the preceding code, the parent component binds the Child component's greet prop to an expression of a constant value. This is just to illustrate how you can use property binding syntax via a simple attribute assignment.
Property bindings are useful when you bind to the actual data that resides in your component. For this purpose, you will learn about data next.