Component composition
The first thing to do is import this component into the ClientApp/components/App.vue
file, and register it as a child component of our main App
component. Replace the entire script
block of the App
component with the following:
<script> import ProductList from "./products/List.vue"; export default { name: "app", components: { ProductList: ProductList } }; </script>
The first thing to note here is the import
line at the top of this block. If you're new to frontend frameworks, this might not make a lot of sense to you. In the modern JavaScript world, we break the application up into chunks, usually also splitting it into separate physical files, which are known as modules. A module will export some piece of functionality which can then be imported into another dependent module using a line of code like this one. This can loosely be thought of as a using
statement in a C# application, where the object or function exported from a module is its interface...