033.Vue3入门,多个插槽Slot的命名调用和#号简写
1、App.vue代码如下:
<template> <div> <h3>插槽学习</h3> <Slot001> <!-- 插槽1--> <template v-slot:s2> <p>{{ msg1 }}</p> </template> <!-- 插槽2--> <template #s1> <p>{{ msg2 }}</p> </template> </Slot001> </div> </template> <script> import Slot001 from './view/Slot001.vue' export default { data() { return { msg1: '我需要插槽1', msg2: '我需要插槽2' } }, components: { Slot001 } } </script>
2、Slot001.vue代码如下:
<template> <h3>我是插槽页面</h3> <slot name="s1">默认1</slot> <a href="#">插槽内容</a> <slot name="s2">默认2</slot> </template> <script> export default { data() { return { } } } </script>
3、效果如下: