app.vue
<template>
<div id="app">
<!-- 绑定属性 "users"data里的-->
<first v-bind:users="users"></first>
<first v-bind:users="users"></first>
<!-- 绑定 检测传值 -->
<second v-bind:title="title"></second>
<second v-bind:title="title"></second>
</div>
</template>
<script>
import Header from './components/Header.vue'
import Body from './components/Body.vue'
export default {
name:'app',
data(){
return{
users:[
{name:"小王",职位:"java web开发",show:false},
{name:"小王",职位:"java web开发",show:false},
{name:"小王",职位:"java web开发",show:false},
],
title:"传的是一个值"
}
},
components:{
"first":Header,
"second":Body
}
}
</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>
<button v-on:click="deleteUser">删除</button>
</div>
</template>
<script>
export default {
name:'header',
props:{
// 指定对象
users:{
// 当前users里传的值类型
type:Array,
required:true
}
},
data(){
return{
}
},
// 传值和传引用
// 传值一个不影响一个
// 传引用相当于传数组,相互影响
methods:{
deleteUser:function(){
this.users.pop();
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
Body.vue
<template>
<div class="body" v-on:click="changeTitle">
{{b}}{{title}}
</div>
</template>
<script>
export default{
name:'body',
props:{
title:{
type:String
}
},
data(){
return{
b:'身体'
}
},
methods:{
changeTitle:function(){
this.title="chaned"
}
}
}
</script>
<style>
</style>