插槽(Vue2)
2023-05-15 本文已影响0人
QYCD
Vue官网
仅仅是个人学习的记录
组件:
<template>
<div class="container">
<header>
<slot name="header">这是Header</slot>
</header>
<main>
<slot>这是Main</slot>
</main>
<footer>
<slot name="footer">这是Footer</slot>
</footer>
<van-button @click="sayHi">
<slot name="submit">Submit</slot>
</van-button>
</div>
</template>
<script>
export default {
name: "ChildModule",
methods: {
sayHi() {
this.$toast({message: 'Hi'})
},
},
}
</script>
<style scoped lang="less">
</style>
调用组件:
<child-module>
<template #header>
我是顶部
</template>
<template #default>
我是主体
</template>
<template #footer>
我是尾部
</template>
<template #submit>
say hi
</template>
</child-module>
image.png