From 8887f4937d7093a80e85accf9be9396db89408f0 Mon Sep 17 00:00:00 2001
From: "3056762376@qq.com" <3056762376@qq.com>
Date: Mon, 7 Nov 2022 10:18:00 +0800
Subject: [PATCH] changes

---
 .../01-slot插槽的基本使用.html         |  9 +++-
 .../02-slot具名插槽的使用.html         |  5 +-
 .../03-作用域插槽的使用.html          | 46 ++++++++++++++++
 .../复习/复习具名插槽的使用.html   | 52 +++++++++++++++++++
 4 files changed, 110 insertions(+), 2 deletions(-)
 create mode 100644 10-组件化开发/09-组件插槽使用/03-作用域插槽的使用.html
 create mode 100644 10-组件化开发/09-组件插槽使用/复习/复习具名插槽的使用.html
diff --git a/10-组件化开发/09-组件插槽使用/01-slot插槽的基本使用.html b/10-组件化开发/09-组件插槽使用/01-slot插槽的基本使用.html
index 2db8883..bf15680 100644
--- a/10-组件化开发/09-组件插槽使用/01-slot插槽的基本使用.html
+++ b/10-组件化开发/09-组件插槽使用/01-slot插槽的基本使用.html
@@ -19,6 +19,13 @@
       <div>这是一个span标签</div>
       <span>呵呵呵</span>
     </apps>
+    <apps>
+      <div>
+        <div>这是一个span标签</div>
+        <span>耶耶耶</span>
+      </div>
+    </apps>
+    <apps></apps>
     <apps></apps>
     <apps>
       <div>这是一个单选框</div>
@@ -36,7 +43,7 @@
     </div>
   </template>
 </body>
-<script src="../../../JavaScript/vue.js"></script>
+<script src="../../JavaScript/vue.js"></script>
 <script>
   new Vue({
     el:"#app",
diff --git a/10-组件化开发/09-组件插槽使用/02-slot具名插槽的使用.html b/10-组件化开发/09-组件插槽使用/02-slot具名插槽的使用.html
index 402cc3c..b934390 100644
--- a/10-组件化开发/09-组件插槽使用/02-slot具名插槽的使用.html
+++ b/10-组件化开发/09-组件插槽使用/02-slot具名插槽的使用.html
@@ -12,6 +12,9 @@
       <input type="text" name="" id="">
       <button>提交</button>
     </apps>
+    <apps>
+      <input type="button" value="">
+    </apps>
     <apps></apps>
   </div>
   <template id="tpl">
@@ -30,7 +33,7 @@
     </div>
   </template>
 </body>
-<script src="../../../JavaScript/vue.js"></script>
+<script src="../../JavaScript/vue.js"></script>
 <script>
   new Vue({
     el:"#app",
diff --git a/10-组件化开发/09-组件插槽使用/03-作用域插槽的使用.html b/10-组件化开发/09-组件插槽使用/03-作用域插槽的使用.html
new file mode 100644
index 0000000..636ba48
--- /dev/null
+++ b/10-组件化开发/09-组件插槽使用/03-作用域插槽的使用.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <div id="app">
+    <apps>
+      <h1>这是父组件</h1>
+      <div slot-scope="data">
+        <span v-for="li in data">{{li.join("-")}}</span>
+      </div>
+    </apps>
+  </div>
+  
+  <template id="tpl">
+    <div>
+      <slot :datas="list">
+        <ul>
+          <li v-for="item in list">{{item}}</li>
+        </ul>
+      </slot>
+    </div>
+  </template>
+
+</body>
+<script src="../../JavaScript/vue.js"></script>
+<script>
+  new Vue({
+    el:"#app",
+    components:{
+      'apps':{
+        template:"#tpl",
+        data(){
+          return {
+            list:['这是内容1','这是内容2','这是内容3']
+          }
+        }
+      }
+    }
+  })
+</script>
+</html>
\ No newline at end of file
diff --git a/10-组件化开发/09-组件插槽使用/复习/复习具名插槽的使用.html b/10-组件化开发/09-组件插槽使用/复习/复习具名插槽的使用.html
new file mode 100644
index 0000000..9aaccef
--- /dev/null
+++ b/10-组件化开发/09-组件插槽使用/复习/复习具名插槽的使用.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<!-- 
+
+  使用嵌套传递内容到插槽必须将slot属性设置在父元素上
+ -->
+<body>
+  <div id="app">
+    <apps>
+      <input type="text" name="" id="" placeholder="左边" slot="left">
+      <label for="" slot="mid">中间</label>
+      <div slot="right">
+        <input type="text" name="" id="" placeholder="右边" >
+        <input type="checkbox" name="" id="">
+      </div>
+    </apps>
+    <br>
+    <apps></apps>
+  </div>
+  <template id="tpl">
+    <div>
+      <slot name="left">
+        <input type="button" value="左边">
+      </slot>
+      <slot name="mid">
+        <input type="button" value="中间">
+      </slot>
+      <slot name="right">
+
+        <input type="button" value="右边">
+      </slot>
+    </div>
+  </template>
+</body>
+<script src="../../../JavaScript/vue.js"></script>
+<script>
+  new Vue({
+    el:"#app",
+    components:{
+      'apps':{
+        template:"#tpl"
+      }
+    }
+  })
+</script>
+</html>
\ No newline at end of file
