vue.js父组件向子组件传值

父组件向子组件传值使用v-bind:users，绑定对象，子组件里面使用props来接收，具体代码如下：

父组件：

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

<script>

//局部注册组件
import Users from './components/Users'
import Header from './components/Header'
import Footer from './components/Footer'

export default {
  name: 'App',
   data () {
    return {
      users: [
	      {name:"luke1",position:"web开发1",show:false},
		  {name:"luke2",position:"web开发2",show:false},
		  {name:"luke3",position:"web开发3",show:false},
		  {name:"luke4",position:"web开发4",show:false},
	      {name:"luke5",position:"web开发5",show:false}
	  ]
    }
  },
  components:{
     Users,
	 "app-header":Header,
	 "app-footer":Footer
  }
}
</script>

<style scoped>
h1{
   color:purple;
}
</style>

子组件：

<template>
  <div class="users">
     <h1>Hello Users</h1>
     <ul>
	   <li v-for="user in users"
	       v-on:click="user.show=!user.show">
	      <h2>{{user.name}}</h2>
		  <h3 v-show="user.show">{{user.position}}</h3>
	   </li>
	 </ul>
  </div>
</template>

<script>
export default {
  name: 'users',
  //props:["users"],
  props:{
     users:{
	    type:Array,
		required:true
	 }
  },
  data () {
    return {
     
    }
  }
}
</script>


<style scoped>
.users{
   width: 100%;
   max-width:1200px;
   margin:40px auto;
   padding: 0 20px;
   box-sizing: border-box;
}

ul{
   display: flex;
   flex-wrap: wrap;
   list-style-type: none;
   padding: 0;
}

li{
  flex-grow: 1;
  flex-basis: 200px;
  text-align: center;
  padding: 30px;
  border: 1px solid #222;
  margin: 10px;
}
</style>

页面效果：