vue插槽的实例详解
文章目录
默认插槽
子组件：
父组件：
最终效果：
具名插槽：
子组件：
作用域插槽：
子组件：
父组件：
动态插槽：
子组件：
父组件：
插槽后备内容：
子组件：
父组件：
概念：
插槽就是子组件中的提供给父组件使用的一个占位符，用slot标签 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的slot标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“位”。
默认插槽
定义：没有指定名称的插槽，用于接收父组件传递的未明确指定插槽名称的内容。
用法：在子组件中使用<slot></slot>定义默认插槽的位置，父组件中直接放在子组件标签内的内容会被渲染到该位置。
子组件：
<template><div class="child"><h2>我是子组件的标题</h2><!-- 默认插槽 --><slot></slot></div>
</template>
父组件：
<template><div><DefaultSlotChild><!-- 这里的内容会被渲染到子组件的默认插槽中 --><p>这是来自父组件的默认插槽内容</p></DefaultSlotChild></div>
</template><script>
import DefaultSlotChild from '引入路径';export default {components: {DefaultSlotChild}
}
</script>
最终效果：
<template><div> <template><div class="child"> <h2>我是子组件的标题</h2> <!-- 这里的内容会被渲染到子组件的默认插槽中 --> <p>这是来自父组件的默认插槽内容。111</p><p>这是来自父组件的默认插槽内容。222</p></div> </template> </div>
</template>
具名插槽：
定义：带有名称的插槽，用于接收父组件中明确指定插槽名称的内容。
用法：在子组件中使用<slot name="插槽名称"></slot>定义具名插槽，父组件中通过<template v-slot:插槽名称>或简写为<template #插槽名称>来指定内容应该插入哪个具名插槽。
子组件：
<template><div class="child"><header><!-- 具名插槽：header --><slot name="header"></slot> </header><footer><!-- 具名插槽：footer --><slot name="footer"></slot> </footer></div>
</template>
父组件：
<template><子组件><template v-slot:header><!-- 这里的内容会被渲染到子组件的header插槽中 --><h1>这是标题</h1></template><template v-slot:footer><!-- 这里的内容会被渲染到子组件的footer插槽中 --><p>这是页脚</p></template></子组件>
</template><script>
import 子组件 from '子组件路径';export default {components: {子组件}
}
</script>
作用域插槽：
定义：一种特殊的插槽，允许子组件将数据暴露给父组件的插槽内容。
用法：在子组件中，通过<slot :数据名="数据值"></slot>将数据传递给插槽；
在父组件中，通过<template v-slot:插槽名称="slotProps">接收数据，并使用slotProps来访问传递过来的数据。
子组件：
<template><ul><li v-for="item in items" :key="item.id"><slot name="item" :item="item">{{ item.text }}</slot></li></ul>
</template><script>
export default {data() {return {items: [{ id: 1, text: '值1' },{ id: 2, text: '值2' },{ id: 3, text: '值3' }]}}
}
</script>
父组件：
<template><子组件><template v-slot:item="slotProps"><!-- 使用slotProps访问子组件传递的数据 --><strong>{{ slotProps.item.text }}</strong></template></子组件>
</template><script>
import 子组件 from './子组件路径';export default {components: {子组件}
}
</script>
动态插槽：
定义：允许插槽的名称是动态的，根据组件的状态或其他条件来决定使用哪个插槽。
用法：在父组件中，通过:slot="动态名称"来绑定插槽的名称，其中动态名称可以是一个计算属性、方法返回值或数据属性。
子组件：
<template><div class="child"><header><!-- 具名插槽：header --><slot name="header"></slot> </header><main><!-- 默认插槽 --><slot></slot> </main><footer><!-- 具名插槽：footer --><slot name="footer"></slot> </footer></div>
</template>
父组件：
<template> <div> <子组件> <!-- 使用计算属性dynamicSlotName来决定内容应该渲染到哪个插槽中 --> <template v-slot:[dynamicSlotName]> <p>这是根据条件动态插入到对应插槽的内容。</p> </template> </子组件> </div>
</template> <script>
import 子组件 from './子组件'; export default { components: { 子组件 }, computed: { // 假设这里根据某个条件返回不同的插槽名 例如：根据某个数据属性来决定 dynamicSlotName() { const someCondition = true; // 实际应用中这里可能是更复杂的逻辑或响应式数据 if (someCondition) { return 'header'; } else { return 'footer'; } } }
}
</script>
插槽后备内容：
定义：当父组件没有为插槽提供内容时，子组件可以定义一些后备内容作为默认显示。
用法：在子组件的<slot>标签内部直接放置的内容，如果父组件没有为该插槽提供内容，则显示这些后备内容。
子组件：
<template> <div> <slot> <!-- 后备内容：如果没有提供插槽内容，则显示这个 --> <p>如果没有提供内容，将显示这段后备文本。</p> </slot> </div>
</template>
父组件：
<template> <div> <!-- 提供了插槽内容，所以后备内容不会显示 --> <子组件名称> <p>这是来自父组件的插槽内容。</p> </子组件名称> <!-- 没有提供插槽内容，将显示后备内容，也就是默认内容 --> <子组件名称></子组件名称> </div>
</template> <script>
import 子组件名称 from './子组件名称.vue'; export default { components: { 子组件名称 }
}
</script>