【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/