uni-app 支付宝小程序this下无$slots $scopedSlots 属性

开发环境	版本号	项目创建方式
Windows	10.0.19042.1415	HBuilderX

操作步骤：

组件mounted 生命钩子中 console.log(this) 运行支付宝小程序开发者工具查看控制台

预期结果：

$attrs: (...)  
$children: []  
$createElement: ƒ (a, b, c, d)  
$el: undefined  
$listeners: (...)  
$mp: {data: {…}, component: Ze}  
$options: {components: {…}, directives: {…}, filters: {…}, beforeCreate: Array(2), _base: ƒ, …}  
$parent: VueComponent {_uid: 4, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}  
$refs: (...)  
$root: VueComponent {_uid: 4, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}  
$scope: Ze {__wxExparserNodeId__: "41930232", _$vueId: "1da55560-5", $vm: VueComponent, __data__: {…}, triggerEvent: ƒ, …}  
$scopedSlots: {default: true}  
$slots: {default: true}  
$store: Store {_committing: false, _actions: {…}, _actionSubscribers: Array(0), _mutations: {…}, _wrappedGetters: {…}, …}  
$uGetRect: ƒ ()  
$vnode: undefined

实际结果：

$attrs: (...)  
$children: []  
$createElement: ƒ (a,b,c,d)  
$el: undefined  
$id: 2  
$listeners: (...)  
$mp: {data: {…}, component: {…}}  
$options: {components: {…}, directives: {…}, filters: {…}, beforeCreate: Array(2), _base: ƒ, …}  
$parent: VueComponent {_uid: 4, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}  
$refs: {}  
$root: VueComponent {_uid: 4, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}  
$scope: {$page: {…}, $id: 2, is: "/uview-ui/components/u-popup/u-popup", $spliceData: ƒ, setData: ƒ, …}  
$store: Store {_committing: false, _actions: {…}, _actionSubscribers: Array(0), _mutations: {…}, _wrappedGetters: {…}, …}  
$uGetRect: ƒ ()  
$vnode: undefined  

没有出现$slots $scopedSlots 属性

yuanlaile 1楼

直接取值可以取到吗？

yibo5220 2楼

https://github.com/dcloudio/uni-app/issues/3529

caililin 3楼

在 uni-app 中开发支付宝小程序时，确实会遇到 this 下没有 $slots 和 $scopedSlots 属性的情况。这是因为支付宝小程序的运行环境与 Vue.js 的运行环境有所不同，导致部分 Vue.js 的特性在支付宝小程序中无法直接使用。

解决方案

使用 slot 标签：在支付宝小程序中，你可以使用原生的 slot 标签来实现插槽功能。虽然这种方式不如 Vue.js 的 $slots 和 $scopedSlots 灵活，但可以满足基本的插槽需求。

<!-- 父组件 -->
<my-component>
  <view slot="header">这是头部内容</view>
  <view slot="footer">这是底部内容</view>
</my-component>

<!-- 子组件 my-component -->
<view>
  <slot name="header"></slot>
  <view>这是组件的主体内容</view>
  <slot name="footer"></slot>
</view>

通过 props 传递内容：如果插槽内容较为复杂，可以通过 props 将内容传递给子组件，然后在子组件中渲染。

<!-- 父组件 -->
<my-component :header="headerContent" :footer="footerContent"></my-component>

<!-- 子组件 my-component -->
<view>
  <view>{{ header }}</view>
  <view>这是组件的主体内容</view>
  <view>{{ footer }}</view>
</view>

export default {
  props: {
    header: String,
    footer: String
  }
}

使用 v-if 或 v-show 控制显示：如果插槽内容需要根据条件显示，可以使用 v-if 或 v-show 来控制。

<!-- 父组件 -->
<my-component>
  <view v-if="showHeader" slot="header">这是头部内容</view>
  <view v-if="showFooter" slot="footer">这是底部内容</view>
</my-component>

使用 scopedSlots 的替代方案：如果需要传递作用域插槽，可以通过 props 传递一个函数，然后在子组件中调用该函数。

<!-- 父组件 -->
<my-component :renderHeader="renderHeader"></my-component>

<!-- 子组件 my-component -->
<view>
  <view>{{ renderHeader('这是作用域插槽的内容') }}</view>
  <view>这是组件的主体内容</view>
</view>

export default {
  props: {
    renderHeader: Function
  }
}