Vue插槽

最新推荐文章于 2024-08-31 22:07:44 发布

曾燕辉

最新推荐文章于 2024-08-31 22:07:44 发布

阅读量268

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/yh_zeng2/article/details/124091914

版权

vue 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

本文详细介绍了Vue.js组件中的插槽概念，包括默认插槽、具名插槽和作用域插槽的用法。通过示例代码展示了如何在组件中定义插槽以及如何在父组件中使用这些插槽来自定义内容。示例中，`DefaultSlot`组件展示了默认插槽的基本用法，`NameSlot`组件演示了具名插槽的使用，而`ScopeSlot`组件则涵盖了作用域插槽，允许传递数据到插槽并进行渲染。

摘要由CSDN通过智能技术生成

默认插槽：

DefaultSlot.vue

<template>
   <div>
      <h1>默认插槽</h1>
      <slot>我是默认插槽，这是一些默认内容</slot>
   </div>
</template>

<script>
export default {
   name: "DefaultSlot"
}
</script>

具名插槽：

NameSlot.vue

<template>
   <div>
       <h1>具名插槽</h1>
       <slot name="name_slot1">我是具名插槽1，这是一些默认内容</slot>
       <slot name="name_slot2">我是具名插槽1，这是一些默认内容</slot>
   </div>
</template>

<script>
export default {
    name: "NameSlot"
}
</script>

<style scoped>
   a{
       margin-right: 5px;
   }
</style>

作用域插槽：

ScopeSlot.vue

<template>
   <div>
        <h1>作用域插槽</h1>
        <slot :games="games">我是作用域插槽，这是一些默认内容</slot>
   </div>
</template>

<script>
export default {
    name: "ScopeSlot",
    data: function(){
        return {
            games: ["穿越火线", "仙剑三", "三国", "拳皇"]
        }
    }
}
</script>

插槽使用：

App.vue

<template>
    <div>
         <!--默认插槽-->
         <DefaultSlot>
            <a href="http://www.baidu.com">百度</a> 
         </DefaultSlot>
         <!--具名插槽-->
         <NameSlot>
             <a slot="name_slot1" href="http://www.baidu.com">百度1</a> 
             <a slot="name_slot2" href="http://www.baidu.com">百度2</a> 
         </NameSlot>
         <!--作用域插槽-->
         <ScopeSlot>
             <template scope="slotData">
                 <ul>
                    <li v-for="(data,index) in slotData.games" :key="index">{{data}}</li>
                 </ul>
             </template>
         </ScopeSlot>
    </div>
</template>

<script>
import DefaultSlot from "./components/DefaultSlot"
import NameSlot from "./components/NameSlot"
import ScopeSlot from "./components/ScopeSlot"

export default {
    name: "App",
    components: {
        DefaultSlot,
        NameSlot,
        ScopeSlot
    }
}
</script>

代码运行效果如下图：