vue 作用域插槽

最新推荐文章于 2024-06-01 21:30:25 发布

werch

最新推荐文章于 2024-06-01 21:30:25 发布

阅读量122

点赞数

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

本文链接：https://blog.csdn.net/weixin_42666092/article/details/128313264

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

具名插槽：

父组件中
<template v-slote="aa">
</template>
简写
<template #aa>
</template>

子组件中
<slot name="aa"></slot>

作用域插槽

vue 插槽父组件

<script setup>
import MyComponent from './MyComponent.vue'
</script>

<template>
	<MyComponent>
      //默认插槽slotProps
     <template v-slot="slotProps">ooooooo{{slotProps.text}}<br/></template>
    //具名插槽传参name+Props
    <template #hh="hhProps">0099ik{{hhProps.text1}}</template>
  </MyComponent>
</template>

2.vue 插槽子组件

<script setup>
const greetingMessage = 'mmmmm'
</script>

<template>
  <div>
  	<slot :text="greetingMessage" :count="1"></slot>
    <slot :text1="990" name="hh">222</slot>
	</div>
</template>