vue学习 22传值和传引用

属性传值可以传两种东西

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>