Vue.js 2 Web Development Projects

Parent-to-child communication with Props

As we saw in the The almighty components section, our component-based app will have a tree of components, and we need them to communicate with each other. For now, we will only focus on descending, parent-to-child communication. This is accomplished with "props".

Our top-bar component needs to know who the players are, which one is currently playing, and what the current turn number is. So, we will need three props--players, currentPlayerIndex, and turn.

To add props to a component definition, use the props option. For now, we will simply list the names of our props. However, you should know that there is a more detailed notation with an object instead, which we will cover in the next chapters.