Skip to content

H
hello-uvue

DCloud / hello-uvue

通知 402
Star 3
Fork 10
H
hello-uvue
提交 4942652c 编写于 作者: Y yurj26
浏览文件
操作

feat: 新增插槽测试例

上级 b457a8b5
隐藏空白更改
内联 并排
Showing with 121 addition and 112 deletion
pages/component-instance/slots/slot.uvue
浏览文件 @ 4942652c
<template>
<view>
<slot name="header"></slot>
<slot name="footer"></slot>
</view>
</template>
<script>
export default {
mounted () {
console.log(this.hasSlots())
},
methods: {
hasSlots (): boolean {
const header = this.$slots.get('header')
const footer = this.$slots.get('footer')
return header !== null && footer !== null
}
}
}
</script>
<style scoped>
</style>
<template>
<view>
<slot name="header"></slot>
<slot name="footer"></slot>
<slot></slot>
</view>
</template>
<script lang="uts">
export default {
mounted() {
console.log(this.hasSlots())
},
methods: {
hasSlots() : boolean {
const header = this.$slots['header']
const footer = this.$slots['footer']
const def = this.$slots['default']
return header !== null && footer !== null && def !== null
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
pages/component-instance/slots/slots.uvue
浏览文件 @ 4942652c
<template>
<view class="page">
<slot-comp class="slot-comp">
<template v-slot:header>header</template>
<template v-slot:footer>footer</template>
</slot-comp>
</view>
</template>
<script>
import slot from './slot.uvue'
export default {
components: {
slotComp: slot
}
}
</script>
<style>
.row {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 10px;
}
</style>
<template>
<view class="page">
<slot-comp class="slot-comp">
<template v-slot:header>header</template>
<template v-slot:default>default</template>
<template v-slot:footer>footer</template>
</slot-comp>
</view>
</template>
<script lang="uts">
import slot from './slot.uvue'
export default {
components: {
slotComp: slot
}
}
</script>
<style>
.row {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 10px;
}
</style>
\ No newline at end of file
pages/rendering/slots/child.uvue
浏览文件 @ 4942652c
<template>
<view class="container">
<view>
<slot name="header"></slot>
</view>
<view>
<slot></slot>
</view>
<view>
<slot name="footer"></slot>
</view>
</view>
</template>
<script>
export default {
name:"child",
data() {
return {}
},
methods: {}
}
</script>
<style>
<template>
<view class="container">
<view>
<slot name="header" msg="Here might be a page title"></slot>
</view>
<view>
<slot msg="A paragraph for the main content."></slot>
</view>
<view>
<slot name="footer" msg="Here's some contact info"></slot>
</view>
</view>
</template>
<script lang="uts">
import { SlotsType } from 'vue'
export default {
name: "child",
slots: Object as SlotsType<{
header : { msg : string },
default : { msg : string },
footer : { msg : string }
}>,
data() {
return {}
},
methods: {}
}
</script>
<style>
</style>
\ No newline at end of file
pages/rendering/slots/slots.uvue
浏览文件 @ 4942652c
<template>
<view class="content">
<child>
<template v-slot:header>
<view class="header">Here might be a page title</view>
</template>
<template v-slot:default>
<view class="main">A paragraph for the main content.</view>
</template>
<template v-slot:footer>
<view class="footer">Here's some contact info</view>
</template>
</child>
</view>
</template>
<script>
import child from './child.uvue';
export default {
components:{child},
data() {
return {}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
<template>
<view class="content">
<child>
<template v-slot:header="slotProps">
<view class="header">{{ slotProps.msg }}</view>
</template>
<template v-slot:default="{ msg }">
<view class="main">{{ msg }}</view>
</template>
<template #footer="{ msg: text }">
<view class="footer">{{ text }}</view>
</template>
</child>
</view>
</template>
<script lang="uts">
import child from './child.uvue';
export default {
components: { child },
data() {
return {}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
</style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或