属性传值可以传两种东西
1.传具体的值
2.传一个引用
如果是传引用,基本上就两个,一个是我们的数组,一个是对象
传引用的话,如果有不止一个地方应用到。改变其中一个,别的地方也会被改变。无论是否在一个组件当中
传值的话,只会改变当前组件中应用到的地方
Users.vue
<template>
<div class="users">
<ul>
<li v-for="user in users" v-on:click="user.show=!user.show">
<h2>{{user.name}}</h2>
<h3 v-if="user.show">{{user.info}}</h3>
</li>
</ul>
<button v-on:click="DeleteUser">删除user</button>
</div>
</template>
<script>
export default {
name: 'users',
// props:["users"],
props: {//标准写法
users: {
type: Array,
required: true
}
},
data(){
return {}
},
methods: {
DeleteUser: function(){
this.users.pop();// 数组出栈
}
}
}
</script>
<style>
.users{
width: 100%;
max-width: 1200px;
margin: 40px auto;
padding: 0 20px;
box-sizing: border-box;/*将该对象设置为 怪异盒模型 */
}
ul{
display: flex; /* 让所有的li摆在一行, */
flex-wrap: wrap; /* 换行:所有的li都会在容器里面,不会超出容器 */
list-style-type: none;
padding: 0;
}
li{
flex-grow: 1; /* 如果一行里面只有一个li的话,这个li会撑满整行;如果是两个的话,则两个li会撑满整行 */
flex-basis: 200px; /* 让每个li有200px的宽 */
text-align: center;
padding: 30px;
border: 1px solid #222;
margin: 10px;
}
</style>
App.vue
<template>
<div id="app">
<app-header></app-header>
<users v-bind:users="users"></users>
<users v-bind:users="users"></users>
<app-footer></app-footer>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
import Header from './components/Header'
import Footer from './components/Footer'
import Users from './components/Users'
export default {
name: 'App',
data(){
return {
users: [
{name: "亨利", info: "信息", show:false},
{name: "亨利", info: "信息", show:false},
{name: "亨利", info: "信息", show:false},
{name: "亨利", info: "信息", show:false},
{name: "亨利", info: "信息", show:false},
{name: "亨利", info: "信息", show:false}
]
}
},
components: {
HelloWorld,
'app-header': Header,
'app-footer': Footer,
'users': Users
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>