Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

(singke) #1
Optimizing your App and Using Components to Display Data Chapter 3

Making the filters a component


We now need to make the filtering section its own component. This isn't strictly necessary


in this scenario, but it's good practice and gives us more challenges.


The problem we face in making the filtering a component is a challenge of transferring filter


data between the filtering component and the team-member component. Vue addresses


this with custom events. These let you pass (or "emit") data to the parent or other


components from the child component.


We are going to create a filtering component which, on filtering change, passes the data


back to the parent Vue instance. This data is already passed through to the team-member


component to filter.


Creating the component


As with the team-member component, declare a new Vue.component() in your


JavaScript, referencing a template ID of #filtering-template. Create a new