Vue父页面向子页面传值

父页面通过v-bind 命令，将数据绑定在子页面调用时

<template>
  <div id="app">
   <h1>rdgd</h1>
  <appheader></appheader>
  // 在这里将数据绑定到子页面

  <users v-bind:theuser="theuser"></users>
   <appfooter></appfooter> 
  </div>
</template>

<script>
import Users from './components/Users';
import appheader from  './components/Header'
import footer from './components/footer'

export default {
  name: 'App',
  data(){
    return {
      title:"这是我的第一个vue程序",
      // 这是需要绑定的数据

      theuser:[{name:"zhangsan",position:"java开发",show:false},
      {name:"zhangsan",position:"java开发",show:false},
      {name:"zhangsan",position:"java开发",show:false},
      {name:"zhangsan",position:"java开发",show:false}]
    }

  },
  // 这里不能使用 p div 等html元素名称
  components:{
    "appheader":appheader,
    "appfooter":footer,
    "users":Users
    }
}
</script>

子页面通过props属性访问

<template>
  <div class="users">
    <h1>Hello Users</h1>
    <ul>
    <li v-for="user in theuser" @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:['theuser'],
 // 这是官方推荐的写法
    props:{
    theuser:{
      type:Array,
      required:true
    }
  },
  data () {
    return {
      
    }
  }
}
</script>