VueCil-属性传值（父组件向子组件传值）

在Vue当中传值有两种形式：
	1.父组件向子组件传值
	2.子组件向父组件传值

父组件向子组件传值
app.vue

<template>
  <div id="app">
    <app-header></app-header>
    <!--通过父组件传值需要找到两个的契合点然后给个属性绑定上去-->
    <!--然后在子组件中调用父组件中的值-->
    <users v-bind:users="users"></users>
    <app-footer></app-footer>
  </div>
</template>

<script>
//局部注册组件
import Users from './components/Users'
import Header from './components/Header'
import Footer from './components/Footer'

export default {
  name: 'app',
  data(){
    return{
      //title:"这是第一个Vue脚手架"
          users:[
              {name:"Henry",position:"Web开发",show:false},
              {name:"Henry",position:"Web开发",show:false},
              {name:"Henry",position:"Web开发",show:false},
              {name:"Henry",position:"Web开发",show:false},
              {name:"Henry",position:"Web开发",show:false},
              {name:"Henry",position:"Web开发",show:false},
              {name:"Henry",position:"Web开发",show:false},
          ]
    }
  },
  components:{
    //也可以省略掉key
    //Users
    "users":Users,
    //不能直接使用header作为Key因为会和组件里面的原生代码冲突
    "app-header":Header,
    "app-footer":Footer
  }
}
</script>

<style scoped>
h1{
  color: purple;
}
</style>

components/Users.vue

<template>
  <div class="users">
    <h1>Hello Users</h1>
    <ul>
        <li v-for="(user,index) in users" :key="index"
            v-on:click="user.show=!user.show">
            <h2>{{user.name}}</h2>
            <h2 v-show="user.show">{{user.position}}</h2>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'users',
    // 拿去父组件中的值用props
    //这种也可以拿到但是不严谨
  // props:["users"],
  props:{
      //最好的方法就是给它指定个对象和属性
      users:{
          //需要告诉它当前users里面传的值是什么
          type:Array,
          //并且它请求的时候它这里面是不是规格的Array
          required:true
      }
  },

  data(){
      return{
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<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>

子组件向父组件传值
Header.vue

    methods:{
      changeTitle:function () {
          //this.title="changed";
        this.$emit("titleChanged","子向父组件传值")//注册一个事件，第一个是注册事件的名字，第二个是内容
      }
    }

App.vue

<!--子组件注册好事件，主主键要获取子组件$event一定是这个名字-->
    <app-header v-on:titleChanged="updataTitle($event)" v-bind:title="title"></app-header>
    methods:{
    	updataTitle(title){
     	this.title=title;
    }
  },