vue3匿名插槽，具名插槽和插槽作用域

最新推荐文章于 2023-12-20 20:53:38 发布

小努努努力

最新推荐文章于 2023-12-20 20:53:38 发布

阅读量68

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_42200179/article/details/129061049

版权

匿名插槽

<!-- 父组件 -->
<template>
  <child>
    匿名插槽传值
  </child>
</template>
<script setup lang="ts">
import child from './components/child.vue';
</script>
<style scoped></style>

```javascript
<!-- 子组件 -->
<template>
    <!-- 子组件接收匿名插槽 -->
    <slot></slot>
</template>
<script setup lang="ts">
import { ref } from 'vue'
</script>
<style scoped></style>

------------------------------------------分割线------------------------------------------

具名插槽

```javascript
<!-- 父组件 -->
<template>
  <child>
    <template v-slot:btn>
      btn
    </template>
    <template v-slot:link>
      link
    </template>
    <!-- 简写 #：插槽名 -->
    <!-- <template #btn>
      btn
    </template>
    <template #link>
      link
    </template> -->
</child>
</template>
<script setup lang="ts">
import child from './components/child.vue';
</script>
<style scoped></style>

```javascript
<!-- 子组件 -->
<template>
    <!-- 根据name接收 -->
    <slot name="btn"></slot>
    <slot name="link"></slot>
</template>
<script setup lang="ts">
import { ref } from 'vue'
</script>
<style scoped></style>

```------------------------------------------分割线----------------------------------------

插槽作用域
插槽作用域：在父组件中的子组件标签内部，获取子组件的数据

<!-- 父组件 -->
<template>
  <child>
    <!-- 使用scope接收子组件数据 -->
    <template #btn="scope">
      <!-- scope是自定义的，一般叫scope 
      scope专门收集所对应的子组件内部的slot标签身上的标签属性，做为自己的属性（除了name属性）
      -->
      {{scope.title}}
      {{scope.mynum}}
    </template>

</child>
</template>
<script setup lang="ts">
import child from './components/child.vue';
</script>
<style scoped></style>

```<!-- 子组件 -->
<template>
    <!-- 根据name接收 -->
    <slot name="btn" title="传title" :mynum="num"></slot>
    <slot name="link"></slot>
</template>
<script setup lang="ts">
import { ref } from 'vue'
let num = ref(30)
</script>
<style scoped></style>