【VueCli脚手架】——第三章嵌套多个组件

一、在components下新建组件

      新建Header.vue、Users.vue、Footer.vue

二、定义新建的组件

在Header.vue中定义如下

<template>
  <div class="header">
    <h1>{{title}}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: "Vue Components Demo"
    };
  }
};
</script>
<style scoped>
.header {
  background: lightgreen;
  padding: 10px;
}
h1 {
  color: #222;
  text-align: center;
}
</style>

 在Users.vue定义如下：

<template>
  <div class="users1">
    <ul>
      <li @click="user.show=!user.show" v-for="(user,index) in users" :key="index">
        <h2>{{user.name}}</h2>
        <h3 v-show="user.show">{{user.age}}</h3>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      users: [
        { name: "Jack", age: 18, show: false },
        { name: "Tom", age: 19, show: false },
        { name: "David", age: 19, show: false },
        { name: "Lucy", age: 18, show: false }
      ]
    };
  }
};
</script>
<style scoped>
h1 {
  color: green;
}
</style>

在Footer.vue中定义如下：

<template>
  <div class="footer">
    <footer>
      <p>{{copyright}}</p>
    </footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      copyright: "Copyright 2020 Vue Demo"
    };
  }
};
</script>
<style scoped>
footer {
  background: #222;
  padding: 6px;
}
p {
  color: lightgreen;
  text-align: center;
}
</style>

三、在App.vue中注册并使用自定义的组件

    在<script></script>中注册

<script>
//局部调用组件
import HelloWorld from "./components/HelloWorld.vue";
import Users from "./components/Users.vue";
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
export default {
  name: "App",
  components: {
    //注册组件
    users: Users,
    header1: Header, //因为有header标签的存在，所以不能起header名字
    footer1: Footer
  }
};
</script>

  在<template></template>中使用新注册的组件

<template>
  <div id="app">
    <header1></header1>
    <users></users>
    <footer1></footer1>
  </div>
</template>

四、启动项目，并用浏览器访问

npm run serve

 在浏览器中键入：http://localhost:8080/