Thu Jun 8 07:07:00 UTC 2023 inscode

src/App.vue

@@ -13,6 +13,16 @@
         <template #title>
           <h1>腾王阁序</h1>
         </template>
+
+        <template v-slot:content="scope">
+          <p>豫章故郡，洪都新府</p>
+          <p>星分翼轸，地接衡庐</p>
+          <p>襟三江而带五湖，控蛮荆而引瓯越</p>
+        </template>
+
+        <template #author>
+          <p>作者：王勃</p>
+        </template>
       </Article>
 
     </div>

src/components/Article.vue

 <template>
     <div class="article-container">
-      <h3 v-color="'red'">Article 组件</h3>
+      <h3>Article 组件</h3>
       <!-- 文章的标题 -->
       <div class="header-box">
         <slot name="title"></slot>
@@ -9,7 +9,7 @@
       <!-- 文章的内容 -->
       <div class="content-box">
      
-        <slot name="content"></slot>
+        <slot name="content" msg="hell vue.js"  ></slot>
       </div>
   
       <!-- 文章的作者 -->
@@ -23,11 +23,21 @@
   export default {
     // 首字母要大写
     name: 'Article',
+    data(){
+      return {
+        user:{
+          name:zs,
+          age:18,
+          
+        }
+      }
+    }
   }
   </script>
   
   <style lang="less" scoped>
   .article-container {
+    flex: 1;
     > div {
       min-height: 150px;
     }