heiye/hello_vue3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
heiye111
2025-10-06 11:01:54 +08:00
parent d297111365
commit cf952dc914
3 changed files with 68 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/01_props/Child.vue
View File

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

31
src/components/01_props/Child2.vue
View File

@@ -1,34 +1,27 @@
<template> <template>
<div class="child"> <div class="child">
<h1>子组件0002</h1> <h1>子组件0002</h1>
<h4>电影:{{ dvd }}</h4> <h3>顶级组件的货币数量{{ money }}万元!,汽车:{{ car }}</h3>
<h3 v-if="toy">玩具:{{ toy }}</h3> <button @click="changeMoney()">更改顶级组件的货币数量</button>
<h3>e:{{ e }} </h3>
<h3> a:{{ a }} </h3>
<h3> f:{{ f }} </h3>
<button @click="">送奥特曼</button>
</div> </div>
</template> </template>
<script setup lang="ts"> <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']) //defineProps(['car','sendcar'])
// const emit = defineEmits(['send-toy']) // const emit = defineEmits(['send-toy'])

50
src/components/01_props/Father.vue
View File

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