uniapp组件封装之slot(插槽)使用

需求:我们需要封装一个组件A,当父组件调用该组件时,可以传入插槽a,并且可以使用组件A抛出来的数据

<!-- 组件A -->
<template>
    <view>
        Hello World!
        <!-- 插槽a -->
        <slot name="a" :scope="{ message:'抛出来的数据' }"></slot>
    </view>
</template>

<!-- 父组件 -->
<template>
    <A>
        <view slot="a" slot-scope="{ scope }">
            <!-- 这样就可以渲染出来我们组件A通过插槽抛给父组件的message -->
            {
   
   { scope.message }}
        </view>
    </A>
</template>

 欢迎关注我的公众号:            欢迎关注我的抖音:

猜你喜欢

转载自blog.csdn.net/qq_41980461/article/details/128234485