<template>
<div id="app">
<!-- 绑定属性 "users"data里的-->
<first v-bind:users="users"></first>
</div>
</template>
<script>
import Header from './components/Header.vue'
export default {
name:'app',
data(){
return{
users:[
{name:"小王",职位:"java web开发",show:false},
{name:"小王",职位:"java web开发",show:false},
{name:"小王",职位:"java web开发",show:false},
],
}
},
components:{
"first":Header,
}
}
</script>
<style>
</style>
Header.vue
<template>
<div class="header">
<ul>
<li v-for="user in users " v-on:click="user.show=!user.show">
<h2>{{user.name}}</h2>
<h3 v-show="user.show">{{user.职位}}</h3>
</li>
</ul>
</div>
</template>
<script>
export default {
name:'header',
// props:["users"],
// 父组件向子组件传值
// 标准属性传值
// 将子组件return当中的内容剪切到父组件里
// <users v-bind:users="users"></users>
// props:["users"],
props:{
// 指定对象
users:{
// 当前users里传的值类型
type:Array,
required:true
}
},
data(){
return{
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>