UPDATE

src/App.vue

@@ -2,7 +2,7 @@
   <!-- 应用程序容器 -->
   <div class="app-container">
     <!-- 页面头部 -->
-    <Header></Header>
+    <Header title="购物车案例"></Header>
     <!-- 页面主体 -->
     <h1>App 根组件</h1>
   </div>
@@ -21,6 +21,7 @@ export default {
 <style lang="less" scoped>
 /* 应用程序容器样式 */
 .app-container {
+  
   padding-top: 45px;
   /* 顶部内边距 */
   padding-bottom: 50px;

src/assets/main.css

@@ -3,7 +3,7 @@
 #app {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 0;
 
   font-weight: normal;
 }

src/components/Header/Header.vue

 <template>
-  <div class="header-container">标题</div>
+  <div class="header-container">{{title}}</div>
 </template>
 
 <script>
-export default {}
+export default {
+  props:{
+    title:{
+      type:String,
+      default:'标题',
+    },
+  }
+}
 </script>
 
 <style lang="less" scoped>