059~063:尚硅谷组件插槽等相关学习示例

src/components/01_props/Child.vue

@@ -1,30 +1,31 @@
 <template>
   <div class="child">
     <h1>子组件0001</h1>
-    <h4>奥特曼:{{ toy }}</h4>
-    <h3>汽车:{{ toy }}</h3>
-    <h3>a:{{ a }} </h3>
-    <h3> b:{{ b }} </h3>
-    <h3>c:{{ c }} </h3>
-    <h3>d:{{ d }} </h3>
-    <button @click="emitter.emit('send-toy',toy)">送奥特曼</button>
+    <h2>{{title}}</h2>
+    <slot name="title">
+
+    </slot>
+    <slot name="list" :youxi="games">
+      默认内容
+    </slot>
+
+
+    
  
-    <Child2 v-bind="$attrs" /> 
+
   </div>
 </template>
 
 <script setup lang="ts">
+defineProps(['title'])
+import { reactive } from 'vue'
+import { ulid } from 'ulid'
 
-import { ref, onMounted } from 'vue';
-import Child2 from './Child2.vue';
-
-import emitter from '@/utils/emitter';
-
-const toy = ref('奥特曼');
-defineProps(['a','b','c','d'])
-
-
-
+let games = reactive([{id:ulid(),title:'超级玛丽'},{id:ulid(),title:'魂斗罗'},{id:ulid(),title:'植物大战僵尸'},
+{id:ulid(),title:'愤怒的小鸟'},{id:ulid(),title:'超级玛丽'},{id:ulid(),title:'魂斗罗'},{id:ulid(),title:'植物大战僵尸'},
+{id:ulid(),title:'愤怒的小鸟'},{id:ulid(),title:'超级玛丽'},{id:ulid(),title:'超级玛丽'},{id:ulid(),title:'超级玛丽'},
+{id:ulid(),title:'超级玛丽'},{id:ulid(),title:'超级玛丽'},{id:ulid(),title:'超级玛丽'},{id:ulid(),title:'超级玛丽'},
+])
 
 </script>
 
@@ -32,9 +33,22 @@ defineProps(['a','b','c','d'])
 
 .child {
   margin-top: 30px;
+  width: 900px;
+  height: 600px;
+  font-size: 21px;
+  
+  
 border-radius: 10px;
   padding: 10px;
   background-color: rgb(133, 156, 96);
   box-shadow: 0 0 10px;
 }
+h2{
+  background-color: rgb(221, 202, 26);
+  font-size: 35px;
+}
+img,video{
+  width: 100%;
+
+}
 </style>

src/components/01_props/Child2.vue

@@ -1,34 +1,27 @@
 <template>
   <div class="child">
     <h1>子组件0002</h1>
-    <h4>电影:{{ dvd }}</h4>
-    <h3 v-if="toy">玩具:{{ toy }}</h3>
-    <h3>e:{{ e }} </h3>
-    <h3> a:{{ a }} </h3>
-    <h3> f:{{ f }} </h3>
-    <button @click="">送奥特曼</button>
+    <h3>顶级组件的货币数量{{ money }}万元!,汽车:{{ car }}</h3>
+    <button @click="changeMoney()">更改顶级组件的货币数量</button>
+
+
+
+
  
   </div>
 </template>
 
 <script setup lang="ts">
 
-import { ref, onUnmounted } from 'vue';
+import { ref, inject } from 'vue';
+
+let {money,changeMoney} = inject('money',{money:ref(1000),changeMoney:()=>{}}) 
+let car = inject('car')
+
+
 
-import emitter from '@/utils/emitter';
-emitter.on('send-toy',(value:any)=>{
-  console.log('子组件emitter事件触发了!',value);
-  toy.value = value;
-})
 
-const dvd = ref('蓝光电影');
-const toy = ref('');
-defineProps(['e','f','a'])
 
-onUnmounted(()=>{
-  emitter.off('send-toy')
-  console.log('emitter事件被卸载了!');
-})
 
 //defineProps(['car','sendcar'])
 // const emit = defineEmits(['send-toy'])

src/components/01_props/Father.vue

@@ -1,38 +1,35 @@
 <template>
   <div class="father">
     <h1>父组件</h1>
-    <h3>汽车:{{ car }}</h3>
-    <h3 v-show="toy">奥特曼:{{ toy }}</h3>
-    <h3>a:{{ a }} </h3>
-    <h3> b:{{ b }} </h3>
-    <h3>c:{{ c }} </h3>
-    <h3>d:{{ d }} </h3>
-    <Child :a="a" :b="b" :c="c" :d="d" v-bind="{e:200,f:230}"/>
-    
+
+
+  
+    <Child>
+      <template #title>
+        <h1>热门游戏列表</h1>
+      </template>
+      <template #list={youxi}>
+        <ul>
+          <li v-for="item in youxi" :key="item.id">游戏名称:{{item.title}}||===||游戏列表id: {{ item.id }}</li>
+        </ul>
+      </template>
+    </Child>
+
+     
     <!-- <AtInput v-model="car" placeholder="请输入汽车名称" /> -->
   </div>
 </template>
 
 <script setup lang="ts">
+import Child from './Child.vue'
+// import { ref, reactive } from 'vue'
+// import { ulid } from 'ulid'
 
-import Child from './Child.vue';
-
-import AtInput from '@/components/AtInput.vue';
-
-import { ref } from 'vue';
-
-let a = ref('123')
-let b = ref('1234')
-let c = ref('1235')
-let d = ref('1236')
-const car = ref('');
-const toy = ref('');
-
-function getToy(value:any){
-    console.log('父组件自定义事件触发了!',value);
-    toy.value = value;
-}
-
+// let games = reactive([{id:ulid(),title:'超级玛丽'},{id:ulid(),title:'魂斗罗'},{id:ulid(),title:'植物大战僵尸'},
+// {id:ulid(),title:'愤怒的小鸟'},{id:ulid(),title:'超级玛丽'},{id:ulid(),title:'魂斗罗'},{id:ulid(),title:'植物大战僵尸'},
+// ])
+// let imgUrl = ref('https://pic.netbian.com/uploads/allimg/250904/171030-175697703016d5.jpg')
+// let videoUrl = ref('https://vjs.zencdn.net/v/oceans.mp4')
 </script>
 
 <style scoped>
@@ -45,4 +42,5 @@ border-radius: 10px;
   box-shadow: 0 0 10px;
 }
 
+
 </style>