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.