vue的透传class属性在微信小程序中不生效

分类：uni-app

组件样式隔离微信小程序自定义组件 uniapp

1、创建了一个最简单的vue3自定义组件。

<template>  
  <view> 测试 </view>  
</template>  

<script setup></script>  

<style lang="scss" scoped></style>

2、在父组件中调用如上创建的组件，并透传class为test的属性。test定义背景颜色为红色。

<test class="test"></test>  

.test {  
  background: #ff0000;  
  color: #00ff00;  
}

3、问题：微信小程序中，这个背景颜色不生效。

2023-12-19 16:32 负责人:无分享

1 个回复

最佳回复

在微信小程序中，需要设置mergeVirtualHostAttributes
详见https://uniapp.dcloud.net.cn/collocation/manifest.html#mp-weixin

m***@yeah.net

在 manifest.json 设置了 mergeVirtualHostAttributes: true 并且组件中设置了虚拟节点 options: { virtualHost: true } 则无法穿透，不设置虚拟节点则可穿透。(2024-07-19)

2024-07-19 17:26

要回复问题请先登录或注册