插槽slot的使用

皇菇凉

已于 2022-08-01 18:14:35 修改

阅读量302

点赞数

分类专栏： vue.js 文章标签： vue.js 前端 javascript

于 2022-08-01 18:13:23 首次发布

本文链接：https://blog.csdn.net/hdy119yaner/article/details/126106701

版权

vue.js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了Vue中如何封装公共组件并使用插槽，包括子组件如何预留插槽以及父组件如何通过v-slot或#插槽名称来传入自定义内容。示例展示了如何在子组件中定义标题和内容插槽，并在父组件中填充个性化信息，如标题为'个人信息'，内容为用户详细资料列表。

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

封装公共组件必备插槽使用，下面我简单记录下基本使用

一、子组件封装插槽预留

<template>
  <div>
   <p>
     我是标题
     <slot name="title">{{title}}</slot>
   </p> 
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   <p>
     我是内容
     <slot name="content">{{content}}</slot>
   </p> 
  </div>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
        default: "默认标题"
      },
      content: {
        type: String,
        default: "默认内容"
      }
    }
  }
</script>

二、父组件引用

<template>
  <div>
    <slot-a title="标题哈哈哈" content="内容哈哈哈">
      <!-- 方法一  v-slot:插槽名称 -->
      <template v-slot:title>
        个人信息
      </template>
      <!-- 方法二  #插槽名称 -->
      <template #content>
       <ul>
        <li>昵称：皇菇凉</li>
        <li>住址：湖北武汉</li>
       </ul>
      </template>
    </slot-a>
  </div>
</template>

<script>
  import slotA from "@/components/slotA.vue"
  export default {
    components: {
      slotA
    }
  }
</script>