Demo地址

如果我們需要從父的組件傳值到子組件可以用props來(lái)實(shí)現(xiàn).
首先,這里有兩個(gè)組件app.vue和myComponent.vue:

<template>
  <div id="app">
    <app-header></app-header>
    <myComponent v-bind:users="users"></myComponent>
    <app-footer/>
  </div>
</template>

<script>

import myComponent from './components/myComponent'
import header from './components/header'
import footer from './components/footer'

export default {
  name: 'App',
  components: {
      'app-header': header,
      'myComponent': myComponent,
      'app-footer' : footer
  },
  data(){
    return {
      users : ["allen","marry","tom"]
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

data中的users就代表我要傳遞的數(shù)據(jù),這里是一個(gè)名字為users數(shù)組.我們要把數(shù)據(jù)傳遞到myComponent中.

<template>
  <div class="myComponent">
    <ul>
      <li v-for="user in users">
        {{user}}
      </li>
    </ul>
  </div>
</template>
<script>
export default
{
      name: 'myComponent',
        //方式一
        // props:["users"],
        //方式二
        props:{
          users:{
              type : Array,
              required : true
            }
        }
    }
}
</script>
<style scoped>
</style>

這里兩種方式拿到父組件傳遞過(guò)來(lái)的值:

• props:["users"]:這種方式直接就能拿到,但不夠嚴(yán)謹(jǐn).
• props:{users:{ type : Array,required : true } },這種方式比較嚴(yán)謹(jǐn),指明了數(shù)據(jù)類型以及是否必須,官方文檔建議采用這種方式來(lái)接收值.