- Vue.js 2 Web Development Projects
- Guillaume Chau
- 262字
- 2021-07-02 22:34:32
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.
- Let's add the props to our component:
Vue.component('top-bar', {
// ...
props: ['players', 'currentPlayerIndex', 'turn'],
})
In the parent component, which is the root application, we can set the props value the exact same way we would for HTML attributes.
- Go ahead and use the v-bind shorthand to wire the props value with the app data in the main template:
<top-bar :turn="turn" :current-player-index="currentPlayerIndex"
:players="players" />
Note that since HTML is case-insensitive and by convention, it is recommended to use the kebab-case (with dashes) names of our props, and the camel-case names in the JavaScript code.
Now, we can use the props in our top-bar component just like data properties. For example, you could write something like this:
Vue.component('top-bar', {
// ...
created () {
console.log(this.players)
},
})
This would print the players array sent by the parent component (our app) in the browser console.
- Developing Middleware in Java EE 8
- Spring Boot+Spring Cloud+Vue+Element項目實戰:手把手教你開發權限管理系統
- Instant 960 Grid System
- Learning ELK Stack
- Scientific Computing with Scala
- ServiceNow:Building Powerful Workflows
- Java零基礎實戰
- Troubleshooting Citrix XenApp?
- 從0到1:HTML5 Canvas動畫開發
- HTML5游戲開發實戰
- 面向對象程序設計及C++(第3版)
- 讓Python遇上Office:從編程入門到自動化辦公實踐
- Learning ROS for Robotics Programming
- C++從零開始學(視頻教學版)(第2版)
- MATLAB計算機視覺實戰