Learn about passing data between unrelated components and directly accessing child components.
- [Instructor] Next we'll look at how an event…can be triggered from within a component…and then handled an apparent component…or a root view instance.…Here in products-events.html,…which is in the chapter three video five exercise files,…we again have a simplified version…of what we've built so far…with just a single product list without slots…and a child component for each list item.…We've seen how data and subsequent updates to that data…flow from parent components to child components…with little effort on our part.…
Next we'll find out how a child component…can trigger updates in a parent component.…For example, if I wanted to offer a way…to hide an item in this list using a link…I might want to add a link like that inside each list item.…But to actually remove the item…I have to update the products array,…which is in the parent component,…in which the child component has no way to access directly.…One way to solve this problem…is by creating a method on the parent component…to remove the item,…and then passing that method…
In this course, Michael Sullivan introduces the Vue framework, explains which problems it aims to solve, and shows how to add Vue to a new or existing webpage. Michael examines a Vue instance and its lifecycle, and shows simple and advanced data binding techniques along with how to manage CSS related attributes dynamically and handle user input and events. After he covers the key concepts and basic conventions of Vue, Michael dives into its component system, which can help you create modular, reusable code, and shows how to use the vue-router plugin to set up a single-page application with client-side routing.
- Creating a Vue app
- Applying control logic
- Binding to the style attribute and class attribute
- Reviewing the features of a Vue instance
- Registering and using Vue components
- Installing vue-cli and webpack
- Understanding the Vue app skeleton