Vue-组件嵌套

在components包下面写三个组件，分别是Users.vue;Top.vue;Flood.vue然后在App.vue中调用这三个组件

Users.vue

<template>
  <div class="users">
      <ul>
        <li v-for="user in users" :key="user" v-on:click="user.show=!user.show">
          <h2>{{user.name}}</h2>
          <h3 v-show="user.show">{{user.job}}</h3>
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  name: 'users',
  data () {
    return {
      users:[
        {name:"bb",job:"java",show:false},
        {name:"xiaozhi",job:"web开发",show:false},
        {name:"lw",job:"oracle",show:false},
        {name:"ming",job:"python",show:false},
        {name:"zz",job:"c++",show:false},
      ]
    }
  }
}
</script>

<style scoped>
.users{
    width: 100px;
    max-width: 1200;
    margin: 40px auto;
    padding: 0 20px;
    box-sizing: content-box;
}
ul{
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
}
li{
  flex-grow: 1;
  flex-basis: 200;
  text-align: center;
  padding: 30px;
  border: 1px solid #222;
  margin: 10px;
}
</style>

Top.vue

<template>
  <header>
    <h1>{{title}}</h1>
  </header>

</template>

<script>
export default {
  name: 'app-top',
  data () {
    return {
      title:"Vue,好好学！"
    }
  }
}
</script>

<style scoped>
header{
    background: lightgreen;
    padding: 10px;
}
h1{
    color: cadetblue;
    text-align: center;
}
</style>

Flood.vue

<template>
  <footer>
    <p>{{msg}}</p>
  </footer>
</template>

<script>
export default {
  name: 'app-flood',
  data () {
    return {
      msg:"多看书，做好笔记！"
    }
  }
}
</script>

<style scoped>
footer{
    background: lightslategray;
    padding: 6px;
}
p{
  color: blueviolet;
  text-align: center;
}
</style>

App.vue

<template>
  <div id="app">
    <app-top></app-top>
    <User/>
    <app-flood></app-flood>

  </div>
</template>

<script>

//拿到所需的组件
import Users from './components/Users'
import Top from './components/Top'
import Flood from './components/Flood'

export default {
  name: 'App',
  data(){
    return{
      title:"第一次学习vue，请多指教！"
    }
  },
  //注册组件
  components: {
    "User":Users,
    "app-top":Top,
    "app-flood":Flood
  }

}
</script>

<style>

</style>