uniapp组件封装之slot(插槽)使用
2022-12-08 734 次阅读
uni-app
需求:我们需要封装一个
组件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>
