vue2

vue/高阶/project1/src/App.vue

@@ -2,49 +2,74 @@
   <div>
     <h1>第一个</h1>
     <!-- 3.使用组件 -->
-     <Demo1 ref="getMain"></Demo1>
-     <br>
-     <Demo2 name="aa" :age="3" :dd="xxx"></Demo2>
-     <hr>
-     <Demo3 @getXX="getThing"></Demo3>
-     <hr>
-     <Demo4></Demo4>
-     <hr>
-     <hr>
-     <Demo5 v-if="isShow"></Demo5>
-     <button @click="isShow = !isShow">销毁demo5</button>
+    <Demo1 ref="getMain"></Demo1>
+    <br />
+    <Demo2 name="aa" :age="3" :dd="xxx"></Demo2>
+    <hr />
+    <Demo3 @getXX="getThing"></Demo3>
+    <hr />
+    <Demo4></Demo4>
+    <hr />
+    <hr />
+    <Demo5 v-if="isShow"></Demo5>
+    <button @click="isShow = !isShow">销毁demo5</button>
+    <br />
+    <hr />
+    <Demo6>哈哈哈哈</Demo6>
+    <Demo7>
+      <template #main>
+        <p>1111</p>
+      </template>
+      <template v-slot:header>
+        <p>222</p>
+      </template>
+      <template #default>
+        <p>333</p>
+      </template>
+    </Demo7>
+    <Demo8>
+      <template v-slot:x="data">
+        <p>{{ data.obj1.name }}</p>
+      </template>
+    </Demo8>
   </div>
 </template>
 
 <script>
 // 1.组件的引入
-import Demo1 from './components/Demo1.vue';
-import Demo2 from './components/Demo2.vue';
-import Demo3 from './components/Demo3.vue';
-import Demo4 from './components/Demo4.vue';
-import Demo5 from './components/Demo5.vue';
+import Demo1 from "./components/Demo1.vue";
+import Demo2 from "./components/Demo2.vue";
+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";
 export default {
-    data() {
-        return {
-          xxx:"你好",
-          isShow: true
-        }
-    },
+  data() {
+    return {
+      xxx: "你好",
+      isShow: true,
+    };
+  },
   // 2.组件的注册
-  components:{
+  components: {
     Demo1,
     Demo2,
     Demo3,
     Demo4,
-    Demo5
+    Demo5,
+    Demo6,
+    Demo7,
+    Demo8,
   },
-  methods:{
+  methods: {
     aa() {
       console.log("你好");
     },
     getThing(x) {
       console.log("触发事件" + x);
-    }
+    },
   },
   mounted() {
     /**
@@ -56,12 +81,11 @@ export default {
      * 触发:this.$emit("事件名")
      * 解绑:this.$off("事件名")
      */
-    this.$refs.getMain.$on("ab",this.aa)
-    console.log(this.$refs.getMain.$on("ab",this.aa));
-  }
-}
+    this.$refs.getMain.$on("ab", this.aa);
+    console.log(this.$refs.getMain.$on("ab", this.aa));
+  },
+};
 </script>
 
 <style>
-
 </style>

vue/高阶/project1/src/components/Demo6.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <h1>默认插槽</h1>
+    <ul>
+        <li>你好</li>
+        <li>你好</li>
+        <li>你好</li>
+    </ul>
+    <slot></slot>
+    <p>今天星今天星期四今天星期四今天星期四今天星期四今天星期四今天星期四期四</p>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

vue/高阶/project1/src/components/Demo7.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <slot name="header"></slot>
+    <h1>具名插槽</h1>
+    <ul>
+      <li>
+        <slot name="main"></slot>
+      </li>
+      <li>你好</li>
+      <li>你好</li>
+      <li>你好</li>
+    </ul>
+    <slot></slot>
+    <p>
+      今天星今天星期四今天星期四今天星期四今天星期四今天星期四今天星期四期四
+    </p>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+</style>

vue/高阶/project1/src/components/Demo8.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <slot name="header"></slot>
+    <h1>作用域插槽</h1>
+    <slot :obj1="obj" name="x">{{ obj.age }}</slot>
+    <h1>2222222</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      obj: {
+        name: "图图",
+        age: 3,
+      },
+    };
+  },
+};
+</script>
+
+<style>
+</style>