To start our component, we can create our Vue project with Vue-CLI, as we did in the recipe Creating Your first project with Vue CLI in Chapter 2, Introducing TypeScript and the Vue Ecosystem, or use the project from the Using slots and name slots to place data inside your components recipe.
Follow these instructions to pass data to the component and validate it:
- Let's open the file called MaterialCardBox.vue in the src/components folder.
- In the <script> part of the component, we create a new property, called props. This property receives the component data, and that data can be used for visual manipulation, variables inside your code, or a function that needs to be executed. In this property, we need to declare the name of the attribute, the type, if it's required, and the validation function. This function will be executed at runtime to validate whether the passed attribute is a valid one:
<script>
export default {
name: 'MaterialCardBox...