App.vue
<template>
<div id="app">
<Header/>
<!--使用组件 并传递当前组件值 -->
<Users :users="users" :username="uname"/>
<Footer/>
</div>
</template>
<script>
//注册局部组件
//1 引入组件
import Users from './components/Users.vue'
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
export default {
name: 'app',
components: { //2 注册组件
Users,
Header,
Footer
},
data(){
return{
users:[
{name:"我是1",wechat:"1111",isshow:false},
{name:"我是2",wechat:"1111",isshow:false},
{name:"我是3",wechat:"1111",isshow:false},
{name:"我是4",wechat:"1111",isshow:false},
{name:"我是5",wechat:"1111",isshow:false},
{name:"我是6",wechat:"1111",isshow:false}
],
uname:"ERDONG",
};
}
}
</script>
<style>
h1{
color:red;
}
</style>
Users.vue
<template >
<div class="users">
<P>{{username}}</P>
<P>{{myusers}}</P>
<ul>
<!-- vue 遍历需要key属性绑定-->
<li @click="val.isshow=!val.isshow" v-for="(val,index) in myusers" :key="index">
<h2>{{val.name}} </h2>
<h3 v-show="val.isshow">{{val.wechat}} </h3>
</li>
</ul>
</div>
</template>
<script>
//js 逻辑部分
export default {
//引用父级传值 第一种方式
//props:["users","username"],
//引用父级传值 第二种方式
props:{
users:{
type:Array,//指定传参类型
required:true //强制要求必须有该传参
},
username:{
}
},
name: 'users',
data() {
return {
myusers:this.users //父级的参数可以直接引用或者再赋值
};
}
}
</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>
页面效果