uni-app小程序父组件变量无法控制子组件自定义插槽内容显示隐藏或是否渲染

uni-app小程序父组件变量无法控制子组件自定义插槽内容显示隐藏或是否渲染

开发环境 版本号 项目创建方式
app和H5 未提及 未提及
<view> <list> <template v-slot="{ item }"> <button v-if="!mode"></button> <button v-else></button> </template> </list> </view>

data() { return { mode: true } }

app和H5都是没问题，小程序两个按钮都不显示


更多关于uni-app小程序父组件变量无法控制子组件自定义插槽内容显示隐藏或是否渲染的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app小程序父组件变量无法控制子组件自定义插槽内容显示隐藏或是否渲染的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个常见的小程序平台与Vue实现差异的问题。在小程序环境中，slot作用域的变量绑定方式与H5/App端有所不同。

解决方案：

  1. 确保父组件正确传递mode变量到子组件：
<list :mode="mode">
  <template v-slot="{ item }">
    <button v-if="!mode"></button>
    <button v-else></button>
  </template>
</list>
  1. 子组件中需要显式声明props接收mode：
props: {
  mode: {
    type: Boolean,
    default: false
  }
}
  1. 或者改用作用域插槽方式传递mode：
<list>
  <template v-slot="{ item, mode }">
    <button v-if="!mode"></button>
    <button v-else></button>
  </template>
</list>
  1. 如果问题依旧，可以尝试强制重新渲染：
this.$forceUpdate();
回到顶部