fix:vue

vue2.0/vue高阶/2.归纳.md

@@ -43,3 +43,9 @@ pubsub.publish()
 如果调用方法有传参 所传真实传参在第二个位置 详情请见Demo5.vue
 取消订阅
 pubsub.unsubscribe()
+
+## 5.slot 插槽
+### 1.默认插槽 (详情请见=>Demo7)
+### 2.具名插槽 (详情请见=>Demo8)
+### 3.作用域插槽 (详情请见=>Demo9)
+### 案例：具名结合作用域 (详情请见=>Demo10)

vue2.0/vue高阶/hello_vue/src/App.vue

@@ -16,6 +16,48 @@
     <Demo4 @getName="getName"></Demo4>
     <Demo5></Demo5>
     <Demo6></Demo6>
+    <hr>
+    <Demo7>
+      <slot>哈哈哈哈哈</slot>
+    </Demo7>
+    <hr>
+    <Demo8>
+      <template #header>
+        我是头部
+      </template>
+      <template v-slot:default>
+        <div>
+          默认的
+        </div>
+      </template>
+      <!-- <slot>我是默认的</slot> -->
+      <template #footer>
+        我是尾部
+      </template>
+    </Demo8>
+    <hr>
+    <Demo9>
+      <!-- <slot></slot> -->
+      <template v-slot="data">
+        <div>
+          {{data.obj.desc}}
+        </div>
+      </template>
+    </Demo9>
+    <hr>
+    <br><br><br>
+    <Demo10 title="抬头看">
+      <!-- <template v-slot:main="data">
+        <div v-for="(item,index) in data.holiday" :key="index">
+          <h5>{{item}}</h5>
+        </div>
+      </template> -->
+      <template v-slot:main="{holiday}">
+        <div v-for="(item,index) in holiday" :key="index">
+          <h5>{{item}}</h5>
+        </div>
+      </template>
+    </Demo10>
   </div>
 </template>
 
@@ -26,6 +68,10 @@ import Demo3 from './components/Demo3.vue';
 import Demo4 from './components/Demo4.vue';
 import Demo5 from './components/Demo5.vue';
 import Demo6 from './components/Demo6.vue';
+import Demo7 from './components/Demo7.vue';
+import Demo8 from './components/Demo8.vue';
+import Demo9 from './components/Demo9.vue';
+import Demo10 from './components/Demo10.vue';
 export default {
   name:"App",
   data() {
@@ -40,7 +86,11 @@ export default {
     Demo3,
     Demo4,
     Demo5,
-    Demo6
+    Demo6,
+    Demo7,
+    Demo8,
+    Demo9,
+    Demo10
   },
   created() {
     console.log(this.day)

vue2.0/vue高阶/hello_vue/src/components/Demo10.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="demo10">
+    <!-- 1.title传参 -->
+    <h4>{{title}}撒花撒花</h4>
+    <p>这是一段话这是一段话这是一段话这是一段话</p>
+    <slot :holiday="holiday" name="main">主体</slot>
+    <h5>我不告诉你我不告诉你我不告诉你我不告诉你</h5>
+    <slot>尾部</slot>
+  </div>
+</template>
+
+<script>
+export default {
+  data(){
+    return {
+      holiday:[
+        '清明','五一',"五四","端午","中秋","国庆","元旦"
+      ]
+    }
+  },
+  props:['title']
+ }
+</script>
+
+<style>
+
+</style>

vue2.0/vue高阶/hello_vue/src/components/Demo7.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="demo7">
+    <h3>插槽开始</h3>
+    1111111<slot>默认</slot>111111111
+    <!-- 插槽 -->
+    
+    <h3>插槽结束</h3>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

vue2.0/vue高阶/hello_vue/src/components/Demo8.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="demo8">
+    <slot name="header"></slot>
+    <h3>我我哦我我我我哦我我我</h3>
+    <slot></slot>
+    <h3>哈哈哈哈哈哈哈</h3>
+    <slot name="footer"></slot>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

vue2.0/vue高阶/hello_vue/src/components/Demo9.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="demo9">
+    老六
+    <slot :obj="obj">{{obj.name}}</slot>
+  </div>
+</template>
+
+<script>
+export default {
+  data(){
+    return {
+      obj: {
+        name:"小艾",
+        desc:"上课不玩游戏了"
+      }
+    }
+  }
+ }
+</script>
+
+<style>
+
+</style>