We've now got the ability to create reusable components that allow us to encapsulate functionality within our project. In order to make these components usable, we'll need to give them the ability to communicate with oneanother. The first thing we'll be looking at is one way communication with component properties (referred to as "props").
The point of component communication is to keep our features distributed, loosely coupled, and in turn make our application easier to scale. To enforce loose coupling, you should not attempt to reference parent component(s) data within the child component and it should be passed using props only. Let's take a look at making a property on our FancyButton that changes the button text:
<template>
<button>
{{buttonText}}
</button>
</template>
<script>
export default {
props: ['buttonText'],
}
</script>
<style scoped>
button {
border: 1px solid black;
padding: 10px;
}
</style>Notice...